相关疑难解决方法(0)

我在寻找解决方案时遇到了麻烦:我以这种方式使用Javascript从SQL文件流字段中检索PDF blob(这是一个lightswitch项目)

var blob = new Blob([screen.WebReportsPdfFilesStream.selectedItem.Pdf], { type: "application/pdf;base64" });

我有blob,我甚至可以将其转换为文件流或base64("JVBERi0 ....."或"%PDF 1.6 ......"等)

到目前为止没问题.

现在我需要在观众中显示它.我更喜欢观众在新窗口中打开,但我愿意以某种方式将其嵌入到我的页面中.

我想知道我是否可以直接将blob或流传递给查看器并显示文档.我尝试过类似的东西

PDFView.open(pdfAsArray, 0)

在这种情况下,嵌入式查看器中没有任何反应.

这pdfAsArray很好,因为我可以显示它将流附加到同一页面内的画布.我只想显示查看器,而不是将PDF嵌入画布,可能在新窗口中.

任何人都可以提供几行代码,如何在Javascript中实现这一点？

我需要使用Javascript将PDF文件编码为Base64.我可以在Javascript中创建Base64编码的jpeg或png图像,但是我找不到任何方法或示例代码来从PDF文件创建Base64编码的字符串.

是否有使用HTML5画布的任何解决方案？

谢谢.

标题说这一切真的......我有一个base64 pdf字符串,我追加到: data:application/pdf;base64,

使用我的网页中的链接将pdf带入新标签页.最初会显示一个空白页面,但随后我刷新页面并显示完美.

这个问题才开始,一旦我更改了我的NodeJS代码以检索PDF,在用https模块检索PDF 但现在我正在使用之前request.

https://jsfiddle.net/o7upp4d8/

我知道一个类似的问题:Pdf.js:使用base64文件源而不是url呈现pdf文件.这个问题得到了Codetoffel的极好回答,但我的问题不同之处在于我的PDF是通过RESTful调用我的Web API实现来检索的.让我解释...

首先,这是使用PDF.JS通过URL打开PDF的基本方法:

PDFJS.getDocument("/api/path/to/my.pdf").then(function (pdf) {
  pdf.getPage(1).then(function (page) {
    var scale = 1;
    var viewport = page.getViewport(scale);
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    page.render({canvasContext: context, viewport: viewport});
  });
});

这很好用,但我使用Angular及其$resource服务通过我的RESTful Web API发出PDF请求.我知道PDF.JS让我来代替传递URL作为PDFJS.getDocument方法(上图)的字符串中包含DocumentInitParams的对象,它被定义在这里.使用DocumentInitParams对象的工作方式如下:

var docInitParams = {
    url: "/api/path/to/my.pdf",
    httpHeaders: getSecurityHeaders(), //as needed
    withCredentials: true
};
PDFJS.getDocument(docInitParams).then(function (pdf) {
    ...
});

这也有效,但它可以$resource通过要求我构建api URL来解决我的Angular问题.但这没关系,因为PDFJS允许我直接给它PDF数据,而不是给它一个PDF的URL,如下所示:

var myPdf = myService.$getPdf({ Id: 123 });

//It's …

我可以将这样的数据传递给PDFJS.getDocument而不是URL.我的数据:

PDF-1.4% 9 0 obj <> endobj xref 9 36 0000000016 00000 n 0000001259 00000 n 0000001336 00000 n ...

如果这似乎是重复的道歉,但我无法看到任何类似问题的明确答案.

当尝试对某些XML执行CORS请求时,我不断从IE8获得"访问被拒绝"JS错误.

我的代码改编自这个例子:

// Create the XHR object.
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
  return text.match('<title>(.*)?</title>')[1];
}

// Make …

所以我正在尝试找出一种完全在客户端将html转换为pdf的方法,在某处我读到你可以在客户端将base64转换为pdf,从那里我记得你可以从html创建一个画布和Canvas中的Base 64.所以我把一切都搞砸了,直到将base64转换为pdf.我似乎无法让最后一部分工作.这是我的代码

var element =  document.getElementById('canvas1');
        console.log(element);
if (typeof(element) == 'undefined' || element == null)
{
        html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
    $('canvas').attr( 'id', 'canvas1' );
  }
});
    }
    setTimeout(function() {
 canvas = document.getElementById("canvas1");
var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default
console.log("jp"+jpegUrl);
console.log("png"+pngUrl);
window.open("data:application/pdf;base64," + pngUrl);
console.log('new');
},500);

我正在使用html2canvas库将html转换为canvas并将其附加到body,到目前为止,它可以完美地工作.但为什么我不能将base64转换为pdf.它只是打开一个空白页面,其中包含URL"data:",就好像它没有加载base64字符串一样.任何帮助将不胜感激,我可能会过度思考这一点,我确信有一个更简单的方法.这是问题的一个方面.