vue文件流转换成pdf预览(pdf.js+iframe)

时间：2020-07-27 23:42:58 阅读：110 评论：0 收藏：0 [点我收藏+]

标签：支持文件 line under 文件流 player htm 情况 syn

需求：后端返回文件流前端将文件流转为成blob地址预览pdf文件

两种方式：

1，PDFJS: https://mozilla.github.io/pdf.js/ 支持获取文件流到客户端，生成blob地址预览

2，Vue-pdf https://github.com/FranckFreiburger/vue-pdf 会出现空白页( 推荐使用iframe方法 )

一，官网(https://mozilla.github.io/pdf.js/getting_started/#download)下载PDFJS，注意放在static文件目录下，如果vue最新版本放在public文件中（本项目@vue/cli 4.4.6）

技术图片

在axios请求中设置响应类型,此方法是自己项目中封装的axios请求，可根据自己情况加这行代码

技术图片

responseType: ‘blob‘,

页面中

    <el-dialog title="PDF 预览" :visible.sync="viewVisible" width="70%" center>
      <template>
        <iframe class="prism-player" :src="pdfUrl" width="100%" height="800px"></iframe>
      </template>
    </el-dialog>

data() {

return {

// pdfUrl:‘http://image.cache.timepack.cn/nodejs.pdf‘,

pdfUrl:‘‘,

viewVisible:false,

}

在返回的数据将文件流转为成blob地址预览pdf文件

            let urlPdf  = window.URL.createObjectURL(new Blob([res.data]))
            console.log(‘urlPdf‘,urlPdf) //blob:http://localhost:8080/e8451cb8-3238-4272-b490-0420df4a5b88
            this.pdfUrl = ‘/pdf/web/viewer.html?file=‘ + encodeURIComponent(urlPdf)
            this.viewVisible = true

技术图片

后台返回的文件流：

技术图片

pdf预览：

技术图片

vue文件流转换成pdf预览(pdf.js+iframe)

标签：支持文件 line under 文件流 player htm 情况 syn

原文地址：https://www.cnblogs.com/duhui/p/13387077.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行