PDF.js：如何在新选项卡中显示 PDF？

Question

作为序言，我必须主持一个事实，即我在 Web 开发环境方面的知识是有限的。事实上，我的问题对某些人来说可能是微不足道的。通过 Ajax 调用，我通过 TCPDF 生成一个 PDF，然后在一个变量中检索它。我将其转换为 base64 并将其放置在 Uint8Array 中。    function create_pdf() {    var jsonOptions = jQuery("#Form").serializeArray();    $.ajax({        url: 'tcpdf/samples/samples_002c.php',        type: 'POST',        cache: false,        data: jsonOptions    })        .done(function(data) {            var pdfData = convertDataURIToBinary('data:application/pdf;base64,' + data);            // View PDF            // .....    })        .fail(function() {            alert('Faild');    });    return false;}function convertDataURIToBinary(dataURI) {    var BASE64_MARKER = ';base64,';    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;}我想通过新选项卡中的 PDF.js 查看器（目的是避免将 PDF 保存在服务器上的文件中）在用户的计算机上显示它。我一直在寻找几天来完成这部分没有成功。您是否有研究主管可以让我在这个项目中取得成功？预先感谢您的建议。

Answer 1

一种解决方案是不使用 PDF.js 并依赖浏览器处理 PDF 的open功能（如@MarcoDeveloper 建议的那样）。另一种解决方案是准备单独的页面，该页面将使用 PDF.js 显示您的文件。

为此，您需要准备简单的 html 页面。我建议使用帖子消息，但如果您的页面在同一域中，您也可以直接发送数据。

预览.html：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(e) {

   if (event.origin === window.location.origin) {

       PDFJS.getDocument({ data: convertDataURIToBinary(e.data) }).then(function() {

       });

   }

}

索引.html：

var win = window.open('preview.html');

win.postMessage(dataURI, '*');

发送 base64 数据并在 preview.html 中解码可能是个好主意。

要直接发送 pdf 数据，您可以使用（仅在同一域中）：

var win = window.open('preview.html');

win.PDFJS.getDocument({ data: binary_data });

文件 preview.html 只需要包含 PDF.js 的 JS 文件，它应该可以工作。

Answer 2

// ADD OPEN WHIT WINDOW JAVASCRIPT

var pdfData = convertDataURIToBinary('data:application/pdf;base64,' + data);

window.open(pdfData);