打印时如何用PDF替换网站

Question

我制作了一份网站简历，在浏览器上看起来不错，但当用户尝试打印时却非常糟糕。我可以尝试使用CSS来改善打印样式，但即便如此，也很难保证它看起来像一个精心策划的PDF简历。

我的问题是，有没有办法在用户点击打印的那一刻用预制的PDF替换页面？我尝试了以下方法，并取得了部分成功：

放置在主 html 正文内<embed src= "main.pdf" id="print-pdf">。然后对于样式：

@media screen {
  #print-pdf {
    display: none;
  }
}
@media print {
  #print-pdf {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
  }
}

打印时，它会在整个页面上覆盖嵌入元素，但不呈现 PDF。尽管如此，如果我在屏幕媒体中启用该块，它确实会呈现它。似乎仅对打印介质启用它并不能在打印例程拍摄快照之前给它足够的时间来加载。

Answer 1

最好的选择是处理媒体查询，以使网站在所有情况下看起来都是最好的。

从您的角度来看，这也是最受支持的选择。您不必在 2 个位置维护数据，您可以努力使该位置的外观和感觉最佳。

显示"下载为 PDF"按钮会有所帮助，但这并不能保证有人无论如何都不会尝试打印页面，最好覆盖所有基础......

如果您愿意，可以将下载为 pdf 按钮，但请确保网站在所有情况下都能运行，并在媒体查询中隐藏该下载按钮。

这就是我们生活的世界。