Vue项目中使用pdf.js预览pdf文件流

最新推荐文章于 2024-08-21 08:34:01 发布

alviter

最新推荐文章于 2024-08-21 08:34:01 发布

阅读量3k

点赞数 2

分类专栏：前端随笔文章标签： vue pdf.js

本文链接：https://blog.csdn.net/alviter/article/details/102521168

版权

Vue项目中使用canvas和pdf.js预览pdf文件流

网上目前的解决方案大多是在将pdf.js放在static文件内，这样j6angjin的后果就是打包文件变得非常大（我的项目由800k变大到将近5m)，后来发现了pdf.js的node包pdf_dist这个给我们提供了一个新的方向，使用npm安装避免了打包文件过大的问题。

代码实现

<template>
  <div>
    <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>
  </div>
</template>
<script>
import service from '@api/main'
import PDF from "pdfjs-dist";
import {
   
    staticUrl
  } from '@utils/config'
export default {
   
	data() {
   
		return {
   
			PDFData:null,
			pages: null
		};
	},
	mounted() {
   
		let url=this.$route.query.url