1.pdf.js下载地址
mozilla.github.io/pdf.js/gett…
2.把下载的文件解压,放入static/pdf文件中
3.打开/static/pdf/web/viewer.mjs文件,搜索defaultOptions.defaultUrl,然后把value置为空字符串
4.然后再搜索file origin does not match viewer,找到后注释(允许PDF.js跨域)
5.新建一个index.vue
<template> <!-- pdf预览 --> <view class="content" > <web-view :src="url" ></web-view> </view> </template>
<script>
import {
computed
} from "vue";
export default {
data() {
return {
viewerUrl: '/static/pdf/web/viewer.html',
fileUrl: "", // pdf网络路径
url: '', // 最终显示在web-view中的路径
};
},
props:{
options:{
type:Object
}
},
created() {
this.fileUrl = this.options.url;
this.intViewer();
},
methods: {
intViewer() {
const tag = this.fileUrl;
this.url = `${this.viewerUrl}?file=${encodeURIComponent(tag)}`;
},
}
};
</script>
<style lang="scss" scoped>
</style>