vue项目中使用pdf.js，通过解析后台base64格式文件解决跨域问题

最新推荐文章于 2024-08-09 13:53:06 发布

置顶

wx_lihao1003745295

最新推荐文章于 2024-08-09 13:53:06 发布

阅读量5.3k

点赞数

分类专栏：技术解决文章标签： pdf.js 跨域 vue npm pdf-dist

本文链接：https://blog.csdn.net/weixin_43834376/article/details/88721356

版权

本文介绍了在Vue项目中利用pdf.js解决后台返回Base64格式PDF文件的跨域问题。首先通过npm安装pdf.js，然后在项目中引入pdfjs-dist模块，使用canvas渲染PDF内容。提供了具体的代码示例。

摘要由CSDN通过智能技术生成

vue项目中使用pdf.js，通过解析后台base64格式文件解决跨域问题

我使用的是通过npm 直接下的包
通过npm在文件目录下安装pdf.js ： npm i pdfjs
在node_modules包中会出现一个pdfjs-dist文件夹
然后就是引入了
在用到的组件中引入
```
import PDFJS from 'pdfjs-dist'
```

我这里是通过canvas渲染的方法，展示的pdf，直接上代码

import PDFJS from 'pdfjs-dist'
export default {
     
	data(){
     
	  return {
     
		  wid: 580, //刚进入页面中的pdf容器的宽度
	      pdfDoc: null, //pdfjs 生成的对象
	      pageNum: 1, //
	      pageRendering: false,
	      pageNumPending: null,
	      scale: 1, //放大倍数
	      page_num: 0, //当前页数
	      page_count: 0, //总页数
	      ctx: null,
	      maxScale: 3,
	      minScale: 1,
	      bigOrsmall: false,
	      loading:true,
		}