pdf 多文件页面全部显示
最早发布于博客园
参考链接
https://github.com/FranckFreiburger/vue-pdf#createloadingtasksrc
单个文件
安装
npm install --save vue-pdf
单个pdf文件显示全部,我是直接复制的参考链接
<template>
<div>
<pdf
v-for="i in numPages"
:key="i"
:src="src"
:page="i"
style="display: inline-block; width: 25%"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');
export default {
components: {
pdf
},
data() {
return {
src: loadingTask,
numPages: undefined,
}
},
mounted() {
this.src.promise.then(pdf => {
this.numPages = pdf.numPages;
});
}
}
</script>
多个pdf文件 全部显示
效果预览
有几个点要注意
-
一 本地pdf文件的话,pdf文件必须放置在 public (vue-cli 4+) 或者 static (vue-cli < 3) 文件夹下, 如果放置src/assets下, 会读取报错,下面demo pdf文件放置在public下
-
二 使用线上的pdf文件时,需要后台配合处理跨域,否则读取不了pdf文件。
-
三 得使用async/await语法糖取出promise对象里面的pdf总页数。
<template>
<div class="about">
<template v-for="item in handelPdfList">
<pdf
v-for="i in item.numPages"
:key="i"
:src="item.src"
:page="i"
style="display: inline-block; width: 25%"
></pdf>
</template>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: "about",
components: {
pdf
},
data() {
return {
// src: loadingTask,
numPages: undefined,
pdfList: [
{
src: '/test.pdf'
},
{
src: '/test.pdf'
}
],
handelPdfList: []
}
},
mounted() {
this.handelPdf()
},
methods: {
async handelPdf() {
for (let info of this.pdfList) {
// 测试使用本地的pdf文件 (必须放到public(vue-cli 4+)或者static文件里面)
// info.src = '/test.pdf'
// 测试使用 自己搭建 已跨域的pdf文件
// info.src = 'http://127.0.0.1:8010/assets/test.pdf'
info['numPages'] = await pdf.createLoadingTask(info.src).promise.then(pdf => {
return pdf.numPages
})
}
// 数据处理完毕后 再复制
this.handelPdfList = this.pdfList
}
}
}
</script>