【问题标题】：How can I load a custom PDF when user(s) trying to print my page out?当用户尝试打印我的页面时，如何加载自定义 PDF？
【发布时间】：2015-04-28 19:27:06
【问题描述】：

目标

我页面上的 media="print" 很糟糕，我想改进它。基本上，当我的用户打印出来时，我想改善页面的外观。

我在想。 . .

而不是在media="print" 的我的页面上隐藏和显示很多项目。我决定完全隐藏我的页面，而是加载 PDF。我制作的PDF。我不确定这是否是最好的方法，但我发现这样可以节省大量时间，并且仍然可以完全控制显示/隐藏对象。

HTML

<body >

  <span id="web">
    <!-- My whole site structure -->
  </span>

  <span id="print"><iframe src="img/USER.pdf" width="100%" height="830" ></span>


</body>

在我的<body> 中，我有一个 PDF

<span id="print"><iframe src="img/name.pdf" width="100%" height="830" ></span>

我在整个页面中隐藏了该 PDF：

#print{
    display: none;
  }

然后，当用户想要打印我的页面时。我想重新加载此 PDF，并隐藏我的整个网站。

CSS

/*Hide the whole page*/
#web{
    display: none;
}


/*Show PDF back*/
#print{
    display:block!important;
}

结果

它有效，但不幸的是，它只在 Safari 中有效。不是 Chrome，不是 Firefox。

实现此类目标的最有效方法是什么？
谁能帮我解决这个问题，使其适用于所有浏览器？
是否有任何 JS 或 jQuery 插件可以帮助我完成此任务？

如果还有什么我可以提供的，请告诉我。

【问题讨论】：

如果他们愿意，你为什么不提供一个下载 pdf 的链接？
我可以做到，但我只想让我的 media="print" 也能看到它的最佳状态。不过感谢您的建议。
您的 PDF 是否总是只有一页？这看起来不是一个好方法，如果您的用户没有活动的 PDF 插件，它也会失败..
PDF 中嵌入了特定的打印说明。您应该只链接到您的 PDF 以使其正常工作。 PDF 的图像不是 PDF。

标签： javascript jquery html css pdf

【解决方案1】：

通常的模式是提供带有文本的链接，例如“可打印版本”。然后，您只需以一种对用户来说并不令人惊讶的方式链接到 PDF。

如果你想坚持使用 CSS 打印布局，我在 CSS paged media specification 方面取得了一些成功。

这是一个示例 CSS 文件 - 请注意，print 样式中只有一小部分...

body {
    font-family: Georgia, serif;
    font-size: 12pt;
}

h2 {
    string-set: title content();
}

img {
    max-width: 100%;
}

.on-new-page {
    display: block;
    page-break-before: always;
}

.keep-together {
    page-break-before: avoid;
}

.keep-intact {
    page-break-inside: avoid;
}

.contents a::after {
  content: leader('.') target-counter(attr(href), page);
}

@page {
    margin: 2.54cm;
    size: portrait;
}

@page :left {
    margin-right: 3.18cm;

    @bottom-left {
        content: counter(page);
    }

    @top-left {
        content: string(title);
    }
}

@page :right {
    margin-left: 3.18cm;

    @bottom-right {
        content: counter(page);
    }

    @top-right {
        content: string(title);
    }
}

@page :first {
    margin-top: 10cm;
}

@media print {
    .dont-print {
        display: none;
    }
}

您可以查看我的example page 并进行打印预览以查看其效果。它因浏览器而异，但您可以看到现在的控制比过去打印布局要多得多。

【讨论】：

我不打算在media = print 设置整个页面的样式我正在尝试加载足以打印的内容，因此我不必在媒体方面做很多工作打印。

【解决方案2】：

对于那些喜欢我的方法并为此寻找解决方案的人，以下是我想出的方法。我将我的 PDF 转换为图像 (.PNG)。

调整您的 HTML 结构

将它们包裹在 div 或 span 周围。

<span id="web">
<!-- Whole HTML structure -->
</span>


<span id="print" style="display: none;" >
    <img src="img/Image.png" width="90%">
</span>

链接到打印样式表。

将此添加到页面顶部。

<link rel="stylesheet" media="print" href="css/print.css" />

回顾

我先隐藏我的图片。

`<span id="print" style="display: none;" ><img src="img/Image.png" width="90%"></span>`

然后，当用户处于打印模式时，我将其显示回来，另一个词media =print，然后我的 print.css 将启动。

print.css

/*Hide the whole page*/
#web{
    display: none;
}


/*Show Image back*/
#print{
    display:block!important;
    background-color: white;

}

结果

当用户尝试打印时，现在他们应该看到如下内容：

这应该适用于任何浏览器，因为它只是一个图像。

【讨论】：