<template><div><pdfv-for="i in numPages":key="i":src="src":page="i"style="display: inline-block; width: 100%"></pdf>
<!-- 宽度设置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><pdfv-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文件夹下，不然会报错：如果文件放在远程服务器上，则直接写远程地址

Warning: Ignoring invalid character "33" in hex string'

原因：读取 PDF 文件时，路径不合法，导致读取不到文件； 在 vue-cli3 脚手架搭建的项目中，读取本地的 PDF 文件需要放到 public 文件夹中，在引用时，不能使用相对路径，且‘/’即表示 public 文件夹 (需略去 public)；