记一次关于pdf 下载需求变更到 pdf 在线预览

记得有一次关于pdf下载要求改为pdf在线预览。

背景：

之前的需求是根据界面提供的Blob数据下载PDF，实现的代码如下：

1常量url=窗口。URL . createobjecturl(new lob([response . data]，{type: 'application/pdf'})

2常量链接=document.createElement('a ')

3 link.href=url

4让filename=response[' headers '][' content-disposition ']。拆分(' filename=')[1]

5文件名=decodeURI(文件名)

6 link.setAttribute('下载'，文件名)

7 document.body.appendChild(链接)

8 link.click()

9 link.remove()

10号窗口。URL.revokeObjectURL(link.href)

也就是说，获取Blob数据=更改Blob类型=转换为Blob URL=生成标记=设置名称=完成下载=移除标记=释放Blob内存。

新需求：　　

现在PRD需要把直接下载改为浏览器在线预览。

:

利用标记a的href属性，将接收到的Blob数据转换为Base64数据格式，并将其类型更改为PDF。代码如下：

1让FileReader=new FileReader()；

2让blobData=新Blob([response.data]，{type: 'application/pdf'})

3 . FileReader . ReadAsDataURl(BlobData)；

4 FileReader . onload=function(){ 0

5 base 64 DATa=FileReader . result；

6 console.log('base64Data '，base64Data)。

7 }

这种方法可以满足要求，但在新的谷歌浏览器中是被禁止的。错误报告如下。

不允许将顶部框架导航到数据URL:

查询结果如下：

出于安全原因(钓鱼)，Chrome已经禁止打开数据URI的网址。

单击此链接将直接报告错误，不允许将顶部框架导航到数据URL。

Chrome的人做了统计，说从非数据URI页面跳到数据URI页面的概率不到万分之五。如果你的网站碰巧在前端使用这种生成页面的方式，你可以尝试迁移到后端来生成页面。

它由插件实现。由于使用了react框架，因此采用了react-pdf插件。这个插件的地址如下：

https://www.npmjs.com/package/react-pdf

文档少，好用，自定义样式，灵活性高，但是样式调整比较麻烦，有一点卡。

最终实现方法：

因为前两种方法在PRD中有一些瑕疵，我恍然大悟，一行代码window.open就可以轻松解决，代码如下：

const url=窗口。URL . createobjecturl(new lob([response . data]，{type: 'application/pdf'})

window.open(url)

我只记得那个窗口. open只能打开url，但没想到Blob url也适用。

Window.open()

Window接口的open()方法将指定的资源加载到具有指定名称的浏览器上下文(窗口、iframe或选项卡)中。如果未指定名称，将打开一个新窗口，并将指定的资源加载到该窗口的浏览器上下文中。

语法

让windowObjectReference=window . open(strUrl，strWindowName，[strWindowFeatures])；

StrUrl===要在新打开的窗口中加载的Url。

StrWindowName====新窗口的名称。

StrWindowFeatures===一个可选参数，它列出了特性(大小、位置、滚动条等。)作为DOMString。

也是自己知识的漏洞。这也是这篇文章带有偏见的原因。

关于Blob Url:

Blob URL(参考W3C官方名称)或对象URL(参考MDN和方法名称)用于Blob或文件对象。

Blob网址只能由浏览器内部生成。URL.createObjectURL()将创建对Blob或File对象的特殊引用，该引用可用于稍后发布URL.revokeObjectURL()。这些URL只能在浏览器的单个实例中和同一会话(即页面/文档的生命周期)中本地使用。

URL/objecturl是一个伪协议，它允许Blob和File对象用作图像的URL源，下载二进制数据链接等。

例如，图像对象的原始字节数据无法处理，因为它不知道如何处理它。例如，它需要通过网址加载图像(二进制数据)。这适用于任何需要网址作为来源的东西。它不是上传二进制数据，而是通过网址提供回来的，所以最好使用额外的本地步骤直接访问数据，而不要经过服务器。

编码为Base-64的字符串的数据URI也是一个更好的选择。数据URI的问题是，在JavaScript中，每个字符占用两个字节。最重要的是，Base-64编码增加了33%。Blob是纯二进制字节数组，不像Data-URI那样有任何重要的开销，这使得它们处理得越来越快。

这是一个伪协议。

只能在浏览器内部生成。

是Blob数据的唯一映射。