0

我有一个带有 PDF 文件的 Vue.js 网站，该文件通过 webpack 包含在我的最终 javascript 包中。（这是我的简历。）自 2017 年以来，以下构建和交付过程对我来说一直运行良好，但在 iOS 14 中突然停止工作：

  1. 使用 LaTeX 构建 PDF。

  2. 使用 webpack 的 url-loader 将 PDF 作为 base64 数据 URI 包含在我的 webpack 包中。

  3. 将该 URL 加载到 vuex 数据存储中，然后在单击时将其作为链接传递。

在过去的三年里，这一直很好：我已经能够单击链接并获得工作 PDF。PDF 是在浏览器中打开还是显示在下载文件夹中，以及它是否获得了我要求它获取的文件名，这都是随机且特定于平台的，但是，这并不重要我。单击链接并获取 PDF 的核心功能适用于我尝试过的每个浏览器和每个平台。

突然之间，在 iOS 14 中，它停止了工作。现在，当我尝试在 iOS Safari 中激活 PDF 链接时，什么也没有发生。当我在 iOS Chrome 中执行此操作时，它会产生一个小弹出窗口，声称它下载了一个文档，但实际上似乎没有任何东西能够打开该文档。而当我在 iOS DuckDuckGo 中执行此操作时，它只会在地址栏中显示 base64 数据 URI。

有趣的是，如果我将 DDG 在地址栏中显示的 dataURI 复制并粘贴到 iOS 上的 Safari 或 Chrome 中，它实际上会显示我的 pdf。所以浏览器仍然有能力从数据 URI 中显示 PDF。它只是不想从我的链接中这样做。

而且我的网站在桌面上仍然可以正常工作。包括在桌面上的 Safari 中。此外，它仍然可以在我妻子的手机上使用（她仍在使用 iOS 13）。所以这显然是苹果在 iOS 14 中改变的东西。但是什么？以及如何让我的网站再次运行？

我猜 Apple 已经以某种方式改变了 iOS 中渲染器的行为，使其能够跨越浏览器但没有其他地方（因为 iOS 中的浏览器仍然需要依赖 webkit，对吗？）

这对我来说是一个非常重要的功能。我故意做出这个决定是为了感知性能——结合预渲染，我网站上的所有内容，包括 PDF，从用户的角度来看都非常接近即时加载。所以我真的很想保留它。

我正在使用 Webpack 2.6.1 和 Vue 2.3.3。这是一个稳定的版本，已经完美运行了三年，所以我觉得除了安全更新之外不需要更新任何东西。

在四处搜索之后，我确实找到了这个 Apple 开发讨论，它表明在 iOS 14 中，Apple 新阻止了对数据 URI 的重定向。但我没有做重定向，我实际上是通过链接直接导航到 URI。链接的讨论表明，新禁止的行为只是使 Apple 与其他浏览器已经禁止的行为保持一致——但我的代码适用于所有其他浏览器，所以不可能。

相关代码，在一定程度上很重要（尽管它是如此基本和明显，我怀疑一个简单的代码修复将是这里的答案）：

来自我的 webpack.base.js：

    {
        test: /\.(pdf)$/,
        loader: 'url-loader'
    },

来自我的 vuex 商店，在 state.js 中

import cvURL from './assets/pdf/gowdercv.pdf';

从包含指向 PDF 的链接的组件中：

<p><a :href="cvURL" download="gowdercv.pdf"><img src="../../assets/icons/file-pdf.svg" class="cvicon"> Download in PDF</a></p>

它作为计算属性加载到组件中，即

computed: {
    cvURL: function(){return this.$store.state.cvURL;},

有谁知道如何在 iOS 中恢复功能？最新版本的 webpack 或 vue 中是否有解决方法？谢谢！

4

1 回答 1

0

更新：在 SO 的一些帮助下，一个熟人发现了这个类似的问题，这也提出了一个解决方案：将 base64 URI 转换为 blob 并传递该数据 url。这也解决了我的问题。虽然那个 SO 没有一个公认的答案，所以我不能投票结束我自己的问题作为重复，唉。

于 2020-10-17T23:53:07.590 回答