使用vue-pdf組件實(shí)現(xiàn)文件預(yù)覽功能 并在文件上增加操作按鈕

vue3不支持vue-pdf，vue3項(xiàng)目用pdfjs-dist

安裝依賴

npm i pdfjs-dist@2.5.207 --save

npm i vue-pdf@4.2.0 --save

引入組件

import pdf from 'vue-pdf'

export default {

? name: 'App',

? components: {

? ? pdf

? },

? ···

}

html使用

<pdf v-for="i in pageNum" :key="i" :src="file" :page="i"></pdf>

export default {

? ···

? data () {

? ? return {

? ? ? file: "/pdf/test.pdf",

? ? ? pageNum: undefined

? ? }

? },

? methods: {

? ? getPageNum () {

? ? ? let loadingTask = pdf.createLoadingTask(this.file)

? ? ? loadingTask.promise.then(pdf => {

? ? ? ? this.pageNum = pdf.numPages

? ? ? }).catch(err => {

? ? ? ? console.error('pdf加載失敗', err);

? ? ? })

? ? }

? },

? mounted () {

? ? this.getPageNum()

? }

}

報(bào)錯(cuò)解決

這種情況是pdf還沒加載出來就去渲染導(dǎo)致頁面pageNum找不到，調(diào)用接口加載完成后再去渲染pageNum

報(bào)這個(gè)錯(cuò)誤加上??{withCredentials: false} ，報(bào)錯(cuò)就沒有了