javascript - 打印时如何用PDF替换网站

Question

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

我的问题是，有没有办法在用户点击打印时用预制的 PDF 替换页面？我尝试了以下部分成功:

放置<embed src= "main.pdf" id="print-pdf">在主要的 html 正文中。然后进行造型:

@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。如果我在屏幕媒体中启用该 block ，它仍然会呈现它。似乎只为打印媒体启用它并没有给它足够的时间在打印例程拍摄快照之前加载。

Answer 1

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

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

提供“下载为 PDF”按钮会有所帮助，但这并不能保证有人无论如何都不会尝试打印该页面，最好涵盖所有基础......

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

这就是我们生活的世界。