PDF.js 和 viewer.js.将流或 blob 传递给查看器 [英] Pdf.js and viewer.js. Pass a stream or blob to the viewer

问题描述

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

I'm having troubles in finding a solution for this: I retrieve a PDF blob from a SQL filestream field using Javascript in this way (it's a lightswitch project)

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

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

I have the blob and I can even convert it in a filestream or to base64("JVBERi0....." or "%PDF 1.6 ......", etc.)

目前没问题.

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

Now I need to display it in a viewer. I prefer the viewer to open in a new window but i'm open to embed it into my page somehow.

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

I'm wondering if I can directly pass the blob or the stream to the viewer and display the document. I've tried something like

PDFView.open(pdfAsArray, 0)

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

Nothing happens in the embedded viewer in this case.

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

The pdfAsArray is good since I can display it appending the stream to a canvas within the same page. I just want to display the viewer, not embed the PDF in a canvas, possibly in a new window.

谁能提供几行代码来说明如何在 Javascript 中实现这一点?

Can anyone provide few lines of code on how to achieve that in Javascript?

推荐答案

我终于让 PDFView.open 方法起作用了.现在，如果我将查看器嵌入到我的页面中，并按照 Rob 在前两个示例中建议的那样调用 open 函数，它将起作用.

I finally made the PDFView.open method working. Now if I embed the viewer into my page and call the open function as Rob suggested in the first 2 examples it works.

对于那些正在寻找这种解决方案的人，我在这里提供了一些代码行:

For those who are looking for this kind of solution I provide some lines of code here:

这是我的 Lightswitch mainPage.lsml.js 中的代码.js 脚本(pdf.js、查看器和其他)在 Lightswitch 项目的主 html 页面(Default.html)中被引用；我认为它应该适用于任何其他不基于 Lightswitch 的 html 页面.

This is the code in my Lightswitch mainPage.lsml.js. The js scripts (pdf.js, viewer and Others) are referenced in the main html page of the Lightswitch project (Default.html); I assume it should work with any other html page not Lightswitch based.

myapp.MainPage.ShowPdf_execute = function (screen) {
// Write code here.
// Getting the stream from sql
var blob = new Blob([screen.WebReportsPdfFilesStream.selectedItem.Pdf], { type: "application/pdf;base64" });
// Pass the stream to an aspx page that makes some manipulations and returns a response
var formData = new FormData();
formData.tagName = pdfName;
formData.append(pdfName, blob);
var xhr = new XMLHttpRequest();
var url = "../OpenPdf.aspx";
xhr.open('POST', url, false);
xhr.onload = function (e) {
    var response = e.target.response;
        var pdfAsArray = convertDataURIToBinary("data:application/pdf;base64, " + response);
        var pdfDocument;
// Use PDFJS to render a pdfDocument from pdf array
    PDFJS.getDocument(pdfAsArray).then(function (pdf) {
        pdfDocument = pdf;
        var url = URL.createObjectURL(blob);
        PDFView.load(pdfDocument, 1.5)
    })
};
xhr.send(formData);  // multipart/form-data 
};

这是convertDataURIToBinary函数

function convertDataURIToBinary(dataURI) {
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));

for (i = 0; i < rawLength; i++) {
    array[i] = raw.charCodeAt(i);
}
return array;
}

仍然遗漏的是将流直接传递到 viewer.html 页面的可能性，以便在新窗口中打开它并有一个单独的 ui 进行渲染.

What is still missed is the possibility to pass the stream directly to the viewer.html page in order to open it in a new window and have a separate ui where make the rendering.

这段代码仍然无法工作，因为我有一个没有文档的空查看器:

This code is still not working since I got an empty viewer with no document inside:

var blob = new Blob([screen.WebReportsPdfFilesStream.selectedItem.Pdf], { type: "application/pdf;base64" });
var url = URL.createObjectURL(blob);
var viewerUrl = 'Scripts/pdfViewer/web/viewer.html?file=' + encodeURIComponent(url);
window.open(viewerUrl);

看起来 encodeURIComponent(url) 没有向查看器传递一个好的对象来加载到查看器中.有什么想法或建议吗?

Looks like the encodeURIComponent(url) is not passing to the viewer a good object to load into the viewer. Any idea or suggestion?

这篇关于PDF.js 和 viewer.js.将流或 blob 传递给查看器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！