打印时如何用PDF替换网站

时间:2019-01-23 16:42:51

标签: javascript html css

我制作了一个网站简历,在浏览器上看起来不错,但是在用户尝试打印时却非常糟糕。我可以尝试使用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。尽管如此,如果我在屏幕媒体中启用该块,它仍会渲染它。似乎仅对打印介质启用它并不能给它足够的时间来加载打印例程进行快照。

1 个答案:

答案 0 :(得分:1)

最好的选择是对媒体查询进行处理,以使网站在所有情况下都保持最佳状态。

从您的角度来看,这也是最受支持的选项。您无需维护两个位置的数据,就可以使该位置看起来和感觉最佳。

提供“以PDF格式下载”按钮会有所帮助,但这不能保证一定不会有人尝试打印页面,并且最好覆盖所有基础知识...

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

这是我们生活的世界。