<template>
<div>
<pdf
v-for="i in numPages"
:key="i"
:src="src"
:page="i"
style="display: inline-block; width: 100%"
></pdf>
<!-- 寬度設(shè)置100% 一行只展示一頁 -->
</div>
</template>
<script>
import pdf from "vue-pdf";
var loadingTask = pdf.createLoadingTask(
"/static/clause.pdf"
);
export default {
data() {
return { src: loadingTask, numPages: undefined };
},
components: {
pdf,
},
mounted() {
this.src.promise.then((pdf) => {
this.numPages = pdf.numPages;
});
},
};
</script><template>
<div>
<pdf
v-for="i in numPages"
:key="i"
:src="src"
:page="i"
style="display: inline-block; width: 100%"
></pdf>
</div>
</template>
<script>
import pdf from "vue-pdf";
var loadingTask = pdf.createLoadingTask(
"/static/clause.pdf"
);
export default {
data() {
return { src: loadingTask, numPages: undefined };
},
components: {
pdf,
},
mounted() {
this.src.promise.then((pdf) => {
this.numPages = pdf.numPages;
});
},
};
</script>注意：文件要放在public文件夾下，不然會報錯：如果文件放在遠(yuǎn)程服務(wù)器上，則直接寫遠(yuǎn)程地址
Warning: Ignoring invalid character "33" in hex string'文章來源：http://www.zghlxwxcb.cn/news/detail-615473.html
原因：讀取 PDF 文件時，路徑不合法，導(dǎo)致讀取不到文件； 在 vue-cli3 腳手架搭建的項(xiàng)目中，讀取本地的 PDF 文件需要放到 public 文件夾中，在引用時，不能使用相對路徑，且‘/’即表示 public 文件夾 (需略去 public)；文章來源地址http://www.zghlxwxcb.cn/news/detail-615473.html
到了這里，關(guān)于vue-pdf 單列顯示多個pdf頁面的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
