uniapp+vue3+h5 使用pdf.js

55 阅读1分钟

1.pdf.js下载地址

mozilla.github.io/pdf.js/gett…

image.png

2.把下载的文件解压,放入static/pdf文件中

image.png

3.打开/static/pdf/web/viewer.mjs文件,搜索defaultOptions.defaultUrl,然后把value置为空字符串

image.png

4.然后再搜索file origin does not match viewer,找到后注释(允许PDF.js跨域)

image.png

5.新建一个index.vue

image.png

image.png

<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>

参考资料:www.cnblogs.com/yilei-zero/…