浏览器预览PDF文件(接口返回的是文件流形式)

最终结果可以直接看文章末尾，前面都是日记一样的内容啊哈哈，是自己解决问题的坎坷的过程...[手动滑稽害怕脸]......

今天解决了一个看起来很小但是却困扰了我近乎一天的问题

需求描述：

通过下载文件接口，后端返回了文件对应的文件流，现在要求不用下载文件直接预览该文件

解决过程：

大部分解决方案都是使用各个版本的pdfjs，但是需求是不建议给项目中新增包文件，而且我尝试了好几次也都失败了，所以在找其他方案。

最后找到了将文件流转为Blob(学才疏浅，不知道怎么更加准确地描述)，然后通过window.open()方法打开，如图

// PDF文件预览
const pdfPreview = (method, url, data, fileName) => {
  methods(method, url, data).then((responseProcess) => {
    const pdfFile = window.URL.createObjectURL(
      new Blob([responseProcess.data], { type: 'application/pdf' })
    )
    // 跳转页面预览
    window.open(pdfFile)
  })
}

但是打开后的文件(页面)是不太合适的，如图

首先存在图标1箭头所指的这个工具栏，尤其是里面图标2指向的下载按钮，会给用户产生一种可以下载的误解，如果用户点了下载按钮，就会发现图标3指向的文件名称并非真实名称，会使得用户感到疑惑。(说的可能有点儿乱，见谅哈)

于是开始寻找隐藏掉顶格工具栏的方法

通过查询window.open()方法的参数，设置了如图中的参数，但是都没有反应

参数详解链接：window.open（）参数详解 - 百度文库

后来又经历了反复尝试pdfjs，以及拼接地址等等操作，但都失败了，就在我毫无头绪的时候，发现了一个帖子的评论，没想到竟然解决了，如图：！

评论链接：window.open()打开pdf文档时，不允许下载文档-前端-CSDN问答

搞了半天是这里出了问题，我把这个方案和百度文库那个摆在一起看一下就明白了，文库那个写错了(或许也是版本的问题，文库那个时间应该挺早的了，没找到上传时间)

最后成功代码如下：

// PDF文件预览
const pdfPreview = (method, url, data, fileName) => {
  methods(method, url, data).then((responseProcess) => {
    const pdfFile = window.URL.createObjectURL(
      new Blob([responseProcess.data], { type: 'application/pdf' })
    )
    // 跳转页面预览
    window.open(pdfFile+"#toolbar=0")
  })
}

最终效果如下图

总算是解决了，知识面+1......

浏览器预览PDF文件(接口返回的是文件流形式)

猜你喜欢