vue3+pdf.js实现pdf预览（pdfjs部署到线上也能运行）

vue3使用pdf.js实现pdf预览

前言

高版本的pdf.js本地运行没有问题，但是部署到线上会报错

Failed to load module script: The server responded with a non-JavaScript MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

经研究发现是由于nginx无法识别mjs文件，从而在http header中错误的使用 Content-Type:application/octet-stream 来传输mjs文件，导致浏览器端认为它不是一个合法的js脚本

解决办法

• 1.编辑nginx的MIME type文件，修改对应的MIME type与mjs的映射，涉及到服务器知识，并且如果进行docker部署啥的，改起来比较麻烦
• 2.较低pdf.js的版本，低版本的文件里没有.mjs格式的文件

这里我们使用第二种办法

下载插件

通过网盘分享的文件：DPFjs.zip
链接: https://pan.baidu.com/s/1LbFpLpqJsw8S5GFN5q70Fw?pwd=6666 提取码: 6666

解压后，将其复制到我们的vue项目中：public/pdfjs

解决跨域

进入到pdfjs/web/viewer.js，全局搜索并注释掉下面的代码

  // if (origin !== viewerOrigin && protocol !== "blob:") {
  //   throw new Error("file origin does not match viewer's");
  // }

组件封装

<script setup lang="ts">
import { ref } from 'vue';

const pdfUrl = ref(''); // pdf文件地址
const fileUrl = '/pdfjs/web/viewer.html?file='; // pdfjs文件地址，这里因为我们放到了public文件夹下面，所以直接/开头，如果你将下载的文件放到了其他位置，这个位置也要变化

let visible = ref(false);


const openDialog = (url: string) => {
	visible.value = true;
	nextTick(() => {
		pdfUrl.value = fileUrl + encodeURIComponent(url);
	})
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<template>
	<el-dialog
		:close-on-click-modal="false"
		title="图纸预览"
		draggable
		width="80%"
		v-model="visible">
		<div class="container">
			<iframe :src="pdfUrl" width="100%" height="100%"></iframe>
		</div>
	</el-dialog>
</template>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 700px;
}
</style>

使用

let PDFSrc = ref();  // pdf地址

const handlePreview = (url: string) => {
    pdfViewerRef.value.openDialog(PDFSrc.value);
};