Vue3 使用pdf.js 预览pdf

最新推荐文章于 2025-01-02 11:08:17 发布

原创

最新推荐文章于 2025-01-02 11:08:17 发布 · 2.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#sass #css #前端

本文介绍了在Vue3中如何利用pdf.js预览PDF文件，由于vue-pdf不支持Vue3，作者提供了基于后端返回文件流的解决方案。步骤包括下载pdf.js并将其静态资源放在static目录下，然后使用iframe进行嵌套展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3 使用pdf.js 预览pdf

非专业如有语术错误请谅解

写在前面：vue-pdf 好像并不支持Vue3 参考https://segmentfault.com/a/1190000039858927

本样例是基于后端返回的是文件流

直接上样例

首先下载pdf.js
注意：将解压后的文件放在static下
在这里插入图片描述

1.使用ifame嵌套

 <iframe
      id='pdf'
      ref='pdf'
      height='100%'
      :src='pdfUrl'
      width='100%' /> 


//可附带token请求，如果不需要则删掉
const Token = store.getters['user/token']
//fileUrl为返回的文件流
let url = fileUrl
//iframe中的src
this.pdfUrl = '/static/pdf/web/viewer.html?file=' + encodeURIComponent(url)
//如果不需要带token则到这一步就结束了


//下面是带token的处理
const res = await fetch(url, {
  method: 'GET',
  headers: {
  //如果不需要token则删掉
    'Authorization': Token,
  },
})
const blob = await res.blob()
let arr = []
arr.push(blob)
//转