加载pdf作为event.data从跨文档消息传递 [英] Load pdf obtained as event.data from cross document messaging
问题描述
对于知道答案的人来说，很容易。我的代码通过跨文档消息从网站成功下载pdf。但是，我现在要在浏览器中显示pdf，可能在iframe或数据对象中。可能我需要知道的本地url的pdf存储为一旦下载。请帮助，可能是容易点。请参阅我的代码。
Easy points for someone who knows the answer. My code successfully downloads a pdf from a website via cross document messaging. However, I want to now display the pdf in the browser, possibly in an iframe or data object. Possibly I would need to know the local url that the pdf is stored as once downloaded. Please help, probably easy points. See the fiddle here for my code.
重要：因为我想下载文件我不想简单地使client.src =http://ops.epo.org/3.0/rest-services/published-data/images/US/7123345/B2/ thumbnail.pdf？Range = 1
IMPORTANT: Because I want to download the file I do not want to simply make client.src="http://ops.epo.org/3.0/rest-services/published-data/images/US/7123345/B2/thumbnail.pdf?Range=1"
HTML代码：
<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代码：
Javascript code:
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.");
}
}
推荐答案
I已尝试过您的代码，它会以文字字符串（在 event.data 中）返回PDF内容。您不能获取字符串数据的URL（本地或非本地），除非您首先将其上传回某处（例如，通过XHR到您自己的服务器）。除此之外，我希望此答案有所帮助。
I've tried your code, it returns PDF content as literal string (in event.data). You can't get a URL (local or non-local) for string data, unless you first upload it back to somewhere (e.g., to your own server via XHR). Apart from that, I hope this answer helps.
以下方法使用数据URI方案来渲染由字符串表示的PDF（如 event.data ）。它的工作伟大与Chrome和Firefox。不幸的是，在IE10我得到Access拒绝消息的Adobe Acrobat Reader插件（IE10 / Win8 64位的最新更新和最新的Adobe Acrobat Reader）。因此，对于跨浏览器解决方案，您最好的选择可能是某种类型的基于HTML5的PDF渲染器，例如 PDF.js < a>。
The following approach uses Data URI scheme to render a PDF represented by a string (like event.data in your case). It works great with Chrome and Firefox. Unfortunately, with IE10 I'm getting "Access Denied" message by Adobe Acrobat Reader plugin (IE10/Win8 64bit w/latest updates and latest Adobe Acrobat Reader). So, for cross-browser solution your best bet would probably be a some kind of HTML5-based PDF renderer, like 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。
Using BLOB and URL.createObjectURL(blob) works only with Chrome. Apparently, Acrobat Reader plugin doesn't support "blob:"-style URL at the time of this writing.
小提琴： http：// jsfiddle .net / Noseratio / uZwQw / 1 /
因此，跨浏览器解决方案仍然需要真正的经典网址。
So, a real classic URL is still required for a cross-browser solution.
这篇关于加载pdf作为event.data从跨文档消息传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
