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

问题描述

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

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方法正常工作了。现在，如果我将查看器嵌入到我的页面中并调用open函数，正如Rob在前两个示例中所建议的那样它可以工作。

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，viewer和Others ）在Lightswitch项目的主html页面中引用（Default.html）;我认为它应该适用于任何其他html页面而不是基于Lightswitch。

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函数

This is the convertDataURIToBinary function

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;
}

仍然可以将流直接传递给观众。 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屋！