加载从跨文档消息传递中作为事件数据获得的 pdf

Load pdf obtained as event.data from cross document messaging

本文关键字：数据 事件 pdf 文档 消息传递 加载      更新时间：2023-09-26

对于知道答案的人来说很容易。我的代码通过跨文档消息传递成功从网站下载 pdf。但是，我现在想在浏览器中显示pdf，可能在iframe或数据对象中。可能我需要知道pdf下载后存储的本地URL。请帮忙，可能很容易。请参阅此处的小提琴以获取我的代码。

重要提示：因为我想下载文件，所以我不想简单地制作 client.src="http://ops.epo.org/3.0/rest-services/published-data/images/US/7123345/B2/thumbnail.pdf?Range=1">

网页代码：

    <input type="button" onclick="runit()" value="runit"></input>
    <iframe width=100 height=100 id="client" src="http://ops.epo.org/3.0/xss/crosssitescript.html" />

Javascript代码：

function runit() {
    // Get the iframe window object
    var client = document.getElementById('client');
    // Create the data string to be passed to the OPS JavaScript
    var data = "{'url' : 'http://ops.epo.org/3.0/rest-services/published-data/images/US/7123345/B2/thumbnail.pdf?Range=1', " + "'method' : 'GET', " + "'requestHeaders' : {'Accept': 'application/pdf' } " + "}";
    // Use the postMessage() method in order to send the data to the
    // iframe object
    client.contentWindow.postMessage(data, 'http://ops.epo.org');
}
// Add event listener for your window
window.addEventListener("message", receiveMessage, false);
// Method handling window events
function receiveMessage(event) {
    // Check origin of the event!
    if (event.origin == "http://ops.epo.org") {
        alert("How do I display the event.data as a pdf on the page?");
    } else {
        alert("Got message from unknown source.");
    }
}

我试过你的代码，它以文字字符串的形式返回PDF内容(event.data(。您无法获取字符串数据的URL(本地或非本地(，除非您首先将其上传回某个地方(例如，通过XHR上传到您自己的服务器(。除此之外，我希望这个答案有所帮助。

以下方法使用数据 URI 方案呈现由字符串表示的 PDF(如您的案例中的 event.data(。它与Chrome和Firefox配合得很好。不幸的是，在IE10中，我收到Adobe Acrobat Reader插件(IE10/Win8 64位，最新更新和最新Adobe Acrobat Reader(的"拒绝访问"消息。因此，对于跨浏览器解决方案，最好的选择可能是某种基于 HTML5 的 PDF 渲染器，如 PDF.js。

小提琴：http://jsfiddle.net/Noseratio/nmTJ9/1/

HTML/JavaScript：

<!DOCTYPE html>
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script type="text/javascript">
        window.runit = function() {
            // var pdfText = event.data;
            var pdfText = pdfSource.text;
            var pdfTextEncoded = btoa(unescape(encodeURIComponent(pdfText)));
            textContainer.innerText = pdfText;
            pdfContainer.innerHTML =
                '<object id="pdf"' +
                    'width="400" height="240" type="application/pdf"' +
                    'data="data:application/pdf;base64,' + pdfTextEncoded + '">' +
                    '<span>PDF plugin is not available.</span>' +
                '</object>';
        }
    </script>
</head>
<body>
    <input type="button" onclick="runit()" value="runit">
    <!-- http://en.wikipedia.org/wiki/Data_URI_scheme -->
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
    <br>
    <textarea id="textContainer" style="width: 400px; height: 240px"></textarea>
    <br>
    <div id="pdfContainer"></div>
<script id="pdfSource" type="text/plain">
%PDF-1.7
1 0 obj  % entry point
<<
    /Type /Catalog
    /Pages 2 0 R
>>
endobj
2 0 obj
<<
    /Type /Pages
    /MediaBox [ 0 0 200 200 ]
    /Count 1
    /Kids [ 3 0 R ]
>>
endobj
3 0 obj
<<
    /Type /Page
    /Parent 2 0 R
    /Resources <<
    /Font <<
        /F1 4 0 R 
    >>
    >>
    /Contents 5 0 R
>>
endobj
4 0 obj
<<
    /Type /Font
    /Subtype /Type1
    /BaseFont /Times-Roman
>>
endobj
5 0 obj  % page content
<<
    /Length 44
>>
stream
BT
70 50 TD
/F1 12 Tf
(Hello, world!) Tj
ET
endstream
endobj
xref
0 6
0000000000 65535 f 
0000000010 00000 n 
0000000079 00000 n 
0000000173 00000 n 
0000000301 00000 n 
0000000380 00000 n 
trailer
<<
    /Size 6
    /Root 1 0 R
>>
startxref
492
%%EOF
</script>
</body>

[编辑] 使用 BLOB 和 URL.createObjectURL(blob( 仅适用于 Chrome。显然，在撰写本文时，Acrobat Reader 插件不支持"blob："样式的 URL。

小提琴：http://jsfiddle.net/Noseratio/uZwQw/1/

因此，跨浏览器解决方案仍然需要真正的经典 URL。

相关文章：