一、vue 文件
<template>
<div class="pdf" style="height:100vh">
<iframe
width="100%"
height="100%"
scrolling="no"
style="border:none"
:src="src"
></iframe>
</div>
</template>
<script>
export default {
name: 'pdf',
data () {
return {
viewerUrl: '/static/pdfjs/web/viewer.html',
fileUrl: 'http://localhost/test.pdf'
src: ''
};
},
created () {
this.src = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}`;
},
};
</script>
二、pdf.js 文件
需要将 js 放到 public 中的 static 文件夹(具体根据自己的项目静态文件目录修改)
注意本地开发还需要设置路径别名