javascript 如何强制浏览器打印网页的 PDF 版本?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9669270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 07:23:46  来源:igfitidea点击:

How can I force the browser to print a PDF version of a webpage?

javascripthtmlprinting

提问by Googlebot

Consider a static HTML page as test.html, and a printable version of the page has been stored in test.pdf. How can I guide browser to load and print test.pdfinstead of test.htmlwhen visitors tell their browserto print?

将静态 HTML 页面视为test.html,并且该页面的可打印版本已存储在test.pdf. 如何引导浏览器加载和打印test.pdf而不是test.html访问者告诉浏览器打印?

If it's not possible how can I introduce a print button (using JavaScript) within the HTML page to do so?

如果不可能,我如何在 HTML 页面中引入打印按钮(使用 JavaScript)来这样做?

采纳答案by James Hill

You cannot force the browser to print a different file than the user is requesting/viewing. That would be a security nightmare!

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

Option 1 (JS (as requested) & HTML)

选项 1(JS(根据要求)和 HTML)

I suggest creating a printable versionlink on your site that will direct the user to the .pdf (opening the PDF in a new window would be preferable).

我建议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>

Option 2 (pure html)

选项 2(纯 html)

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

回答by David Hellsing

You can't hiHyman the print command in the browser, but you can hiHyman keyboard shortcuts (although I wouldn't recommend it) so that when the user prints using ctrl/cmd + p, it redirects to a PDF (or does something else). This is a usability minefield though, you should probably just create a big link that says "Printable version" and link it to the PDF (or a version of the page that uses a print-friendly CSS).

你不能劫持浏览器中的打印命令,但你可以劫持键盘快捷键(虽然我不推荐它),这样当用户使用 打印时ctrl/cmd + p,它会重定向到 PDF(或做其他事情)。不过,这是一个可用性雷区,您可能应该创建一个大链接,上面写着“可打印版本”并将其链接到 PDF(或使用打印友好 CSS 的页面版本)。

Another good options is to simply define some rules for the printmedia type in your CSS file, then the browsers will apply those when the user prints, without any hacks or javascript at all.

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

But since you asked I created a small shortcut hiHymaning script for the print command. It‘s kind of tricky because of the mac command key, but something like:

但是既然你问我为打印命令创建了一个小的快捷方式劫持脚本。由于 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 ));
}
?

That's pretty cool, but don't use it :)

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

回答by Supuhstar

Here is the way the W3C says you should:

以下是 W3C 说你应该的方式:

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

Mind you, as far as I can tell, no browser currently supports this. Sorry.

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