如何打印动态生成的pdf dataUrl？答案

【问题标题】：How to print dynamically generated pdf dataUrl?如何打印动态生成的pdf dataUrl？
【发布时间】：2015-11-23 16:18:54
【问题描述】：

我正在尝试从网页打印动态生成的 PDF。

var $iframe = $('<iframe>');
$iframe.appendTo('body');
$iframe.load(function() {
    var iframe = $iframe[0];
    var result = iframe.contentWindow.document.execCommand("print", false, null);
    if (!result) iframe.contentWindow.print();
    $.remove($iframe);
});
$iframe.attr('src', dataUrl);

execCommand() 给出错误信息：

Uncaught SecurityError: Blocked a frame with origin “http://localhost:2520”访问原点为“null”的框架。请求访问的帧具有“http”协议，该帧是访问具有“数据”协议。协议必须匹配。

另外，设置 src attr 会给出警告：

资源解释为文档，但使用 MIME 类型应用程序/pdf 传输：

dataUrl 如下所示：

data:application/pdf;base64,JVBERi0xLjQKJdP...

编辑：@Mike C

我可以创建 iframe 并显示 pdf，但是当我打印时，它是空白的。

<style type="text/css" media="print">
    body * { display:none }
    iframe#theframe { display:block }
</style>

var $iframe = $('<iframe id="theframe" src="'+dataUrl+'"></iframe>');
$iframe.appendTo('body');
$iframe.load(function() {
    setTimeout(function() {
        window.print();
    }, 1000);
});

【问题讨论】：

Get DOM content of cross-domain iframe的可能重复
我不需要获取内容，已经有内容了！我只需要打印。
显示PDF而不是打印对用户来说不是更舒服吗？也许出于某种原因，他们宁愿保存 PDF 甚至制作屏幕截图。我不认为打印 PDF 按钮会很方便。
@PaulBrown "尝试从网页打印动态生成的 PDF。" 可以在问题中包含返回 data URI 的 js？
它对服务器进行 ajax 调用以获取数据 URI。

标签： javascript jquery pdf iframe

【解决方案1】：

尝试使用window.open()、document.write()、setTimeout()

var popup = window.open("", "w");

var html = '<!doctype html><html><head></head>'
           + '<body marginwidth="0" marginheight="0" style="background-color: rgb(38,38,38)">'
           + '<embed width="100%" height="100%" name="plugin" src="data:application/pdf;base64,JVBERi0xLjQKJdP..." type="application/pdf">'
           + '<script>setTimeout("print()", 1000)</script></body></html>';

popup.document.write(html);

【讨论】：

Chrome 在一个短滚动框（150px 高）中显示 pdf。它会打开打印对话框，但页面是空白的，带有页眉和页脚。 FF 还在 150 像素高的滚动框中显示 pdf，但不显示打印对话框。 IE11根本不显示pdf，也不弹出打印对话框。
@PaulBrown "它对服务器进行 ajax 调用以获取数据 URI。" 可以包括 js，它在 Question 中执行 $.ajax()？尝试将响应返回为 Blob ？见stackoverflow.com/q/12876000
我在服务器上进行 base64 编码...但在这里试试stackoverflow.com/a/18650249/358954
@PaulBrown 另一种选择是将当前的window.location.href 保存到变量，将location.href 设置为data URI，将onfocus 事件添加到window，其中location.href 将设置为已保存location.href ，调用print() ，当用户焦点回到顶部时，窗口应该返回到原来的location.href ；见stackoverflow.com/a/31763030