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) {&nbsp; &nbsp;if (event.origin === window.location.origin) {&nbsp; &nbsp; &nbsp; &nbsp;PDFJS.getDocument({ data: convertDataURIToBinary(e.data) }).then(function() {&nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp;}}索引.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 JAVASCRIPTvar pdfData = convertDataURIToBinary('data:application/pdf;base64,' + data);window.open(pdfData);