# 确保 Safari 阅读模式打印 PDF 不丢失图片

> 本文开放前 70% 正文，剩余内容会员可见。

原文：https://utgd.net/article/21138

自 Hum 和我开发了一种将线上内容精简格式后保存到本地的方法以来，我早已习惯将网页保存为 PDF，以便阅读（尽管我并没有采取连续单页的 PDF，而仍然选择传统的分页 PDF）。不过，这一流程时不时遇到阻碍，例如在 Safari 阅读模式下导出 PDF 时，图片会消失。在过去，这一问题并未引起我的重视，毕竟我更喜欢剪藏网页到本地的轻量化思路，不那么依赖阅读模式，但毕竟问题存在，于是在五一假期中顺手解决。

症结其实很明显，解决方案也很直白，但网上几乎未见这一方向的讨论，遂有本文。

部分情况下，Safari 阅读模式下的网页可能无法正常打印图片，你可以试一试这个页面，我在多台电脑的 Safari 浏览器中测试过，比较容易复现问题：在阅读模式下能够看到图片，但打印时无论如何调整打印设置，都无法显示图片。

遇到这类问题，想必诸位也很容易和我一样，马上想到几种可能：1\. 网络问题；2\. Safari 浏览器的问题；3\. 网页本身的问题。鉴于无论如何切换网络或换电脑（连带着也测试了不同版本的 Safari）都难以解决问题，我们不难把搜索范围缩小到网页——是，接下来的一步才最为关键：网页的哪个部分出问题了？

事实上，问题不在于网页本身，而在于被 Safari 阅读模式加工后的网页。在技术上，Safari 的阅读模式其实是一个新的网页，也有自己的独立的 HTML 源代码，而或许是 Safari 为了顾及不同屏幕、不同大小窗口的阅读体验，阅读模式内置了非常复杂的样式，结果，偶尔会弄巧成拙，导致图片打印不出来。我们做个小实验，就能看问题在于阅读模式：往无法打印图片的页面中插入一个在其他网页中可以正常打印的图片，再尝试打印，就会发现新插入的图片一切正常，这证实是 Safari 阅读模式修改过的当前页面配图出了问题。

一旦看懂这一层，接下来的工作就是调整 Safari 阅读模式下的图片源代码——是的，这一明明白白的答案，必然会吓退许多不喑代码的读者，何况 Safari 的代码还不简单，估计专业人士也不乐意看。然而，Safari 那复杂的代码毕竟是为了调节众家口味，但在打印那一瞬间，我们只求当前页面显示正常，根本不需要复杂的适应性代码！转念一想，我们可以这样问 GPT——如果你懂 Javascript，当然问都不用问，信手就能写出来了——如何写一段 Javascript，把 Safari 阅读模式中的配图 HTML 代码更换成普通的图片元素形式（记得附上代码）？

注：之所以用 Javascript，是为了反复使用这段代码。

```
var imageElements = document.querySelectorAll('img');
imageElements.forEach(imageElement => {
    var imageUrl = imageElement.getAttribute('data-src');
    var imageAlt = imageElement.getAttribute('alt');
    var newImgElement = document.createElement('img');
    newImgElement.setAttribute(
```

---

[前往标准阅读页](https://utgd.net/article/21138?audience=web)