如何强制浏览器打印网页的 PDF 版本？答案

【问题标题】：How can I force the browser to print a PDF version of a webpage?如何强制浏览器打印网页的 PDF 版本？
【发布时间】：2012-03-12 14:47:24
【问题描述】：

将静态 HTML 页面视为test.html，该页面的可打印版本已存储在test.pdf 中。当访问者告诉他们的浏览器打印时，如何引导浏览器加载和打印test.pdf 而不是test.html？

如果不可能，我如何在 HTML 页面中引入打印按钮（使用 JavaScript）来做到这一点？

【问题讨论】：

你可以通过 PHP 做到这一点。不是JS。 webdesign.about.com/od/php/ht/force_download.htm在JS中，你已经发送了文件头，所以你不能做这样的异国情调。
1.这将下载文件，而不是打印； 2.即使加载pdf，也会打开不打印。
糟糕，我误读了这个问题。可能有效的一件事（不知道）是将 pdf 加载到 iframe 中并调用 iframe 的打印。但我不确定保留了多少 DOM。
我很困惑，您使用的是打印友好的 CSS 还是预制的 PDF 文件？因为这些是非常不同的东西。
@Ali，我已经回滚了你的编辑。在已经提供答案之后，您不能完全更改问题。请求 CSS 解决方案来自定义打印内容与打印时打开 PDF 完全不同。如果您更改了要求，请创建一个新问题。

标签： javascript html printing

【解决方案1】：

您不能强制浏览器打印与用户请求/查看的文件不同的文件。那将是一场安全噩梦！

选项 1（JS（根据要求）和 HTML）

我建议在您的网站上创建一个printable version 链接，将用户引导至 .pdf（最好在新窗口中打开 PDF）。

<!-- JS -->
<script type="text/javascript">
    function LoadPrintableVersion() {
        window.open("Test.pdf");
    }
</script>

<!-- HTML -->
<span id="spanPrintableVersion" onclick="LoadPrintableVersion()">
    Printable Version
</span>

选项 2（纯 html）

<a href="test.pdf" target="_blank">Printable Version</a>

【讨论】：

为什么不直接使用<a> 标签链接到PDF？那么它也可以在没有 JS 的情况下工作。
@David，因为用户专门要求 JS，而我在我的 JS 框中：) 我将提供一个纯 html 示例（因为您的观点是有效的）！
请解释如何将不同的文档发送到打印机是“安全噩梦”？
@Supuhstar，认真的吗？我可以为此想到一百万种邪恶的用途。更好的问题是，除了 CSS 样式以使打印时更加用户友好之外，为什么有人想要打印屏幕上的内容以外的东西？如果用户选择打印屏幕上的内容，他们应该知道正在打印的内容。
@JamesHill 这里只是我能想到的几个例子：带有特殊格式版本的个人简历，以确保它始终打印在一页上；谷歌地图，打印路线搜索会打印逐步路线，而不是屏幕上的内容；仅限 Flash（或 Silverlight 或 Canvas）的网站，其中已创建并应打印预览图像，因为当前显示的内容并不总是可以立即理解

【解决方案2】：

你不能在浏览器中劫持打印命令，但你可以劫持键盘快捷键（虽然我不推荐它），这样当用户使用ctrl/cmd + p 打印时，它会重定向到 PDF（或执行某些操作）别的）。这是一个可用性雷区，您可能应该只创建一个大链接，上面写着“可打印版本”并将其链接到 PDF（或使用打印友好 CSS 的页面版本）。

另一个不错的选择是在 CSS 文件中简单地为 print 媒体类型定义一些规则，然后浏览器将在用户打印时应用这些规则，而无需任何 hack 或 javascript。

但既然你问我为打印命令创建了一个小的快捷方式劫持脚本。由于 mac 命令键，这有点棘手，但类似于：

var cmd = false;

$(document).on('keydown', function(e) {

    if(detectMacCommand(e.which)) {
        cmd = true;
        return;
    }

    // now detect print (ctr/cmd + p)
    if ( e.which == 80 && ( e.ctrl || cmd ) ) {
        e.preventDefault();
        alert('redirect to PDF');
    }

}).on('keyup', function(e) {

    if(detectMacCommand(e.which)) {
        cmd = false;
        return;
    }

});

function detectMacCommand(key) {
    return ( $.browser.mozilla && key == 224 ||
             $.browser.opera   && key == 17 ||
             $.browser.webkit  && ( key == 91 || key == 93 ));
}

这很酷，但不要使用它:)

【讨论】：

【解决方案3】：

这是 W3C 所说的你应该这样做的方式：

<LINK REL="alternate" HREF="/path/to/PDFVersion.pdf" TYPE="application/pdf" MEDIA="print" TITLE="PDF version" />

请注意，据我所知，目前没有浏览器支持此功能。对不起。

【讨论】：