在接手一个离职同事的项目准备开发新需求，将项目拉下来后 install 时，发现一个安装包的错误，这是一个 pdf 预览的插件，尝试多次无法顺利安装后去 npm 网站上 查看，显示这个包含有恶意代码的提醒并已经被 npm 安全团队从注册表中删除。我直接好家伙，赶紧对这个模块进行了替换。
具体现象
分析原因
看了下 git 记录发现最少已经是 10 个月之前就已经安装，之前一直没发现问题，可能因为这个同事一直没有再重新安装过整个 node_modules ；另外在 ci/cd 项目发布过程中没问题，是因为公司私有库中会缓存已经安装过的包
在我删除本地的 node_modules 和.lock 文件，指定到公司的私有库地址重新 install 后安装成功了。
1
| npm install --registry=http://xxxx/repository/xinnpm-ali
|
本地运行后查看 bsd-pdf 这个包在项目中的使用，一切正常。随后查看具体这个包到底有哪些问题。
npm 查看
在 npm 中查询这个包，可以发现因为含有恶意代码，已经被删除只保留了一个占位符
通过 npm 中的链接查看可以看到 4 条关于 bsd-pdf 这个包的不安全信息
点一个看下，就......嗯......看着还挺危险的
替换 pdf 插件
发现问题，接下来就是解决问题，因为项目是一个 vue2 的项目，尝试采用vue-pdf 插件，但在替换过程中发现 vue-pdf 有很多问题（公司项目没问题，但新建的其他项目有错误信息），因而又尝试了另一个插件vue-pdf-embed，比 vue-pdf 更方便使用，因而最后使用了 vue-pdf-embed，对 vue-pdf 也进行一下记录。
vue-pdf
基础使用
在项目中引入 vue-pdf，默认只展示第一页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <template>
<div class="pdf-wrap">
<pdf class="pdf-content" :src="javaScriptPdf"></pdf>
</div>
</template>
<script>
import pdf from "vue-pdf";
import javaScriptPdf from "@/assets/javaScript.pdf";
export default {
components: {
pdf,
},
data() {
return {
javaScriptPdf,
};
},
};
</script>
<style scoped>
.pdf-wrap {
height: 100vh;
}
</style>
|
显示 pdf 的所有页内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <template>
<div class="pdf-wrap">
<pdf
v-for="(pdf, index) in numPages"
:key="index"
:src="src"
:page="pdf"
></pdf>
</div>
</template>
<script>
import pdf from "vue-pdf";
import javaScriptPdf from "@/assets/javaScript.pdf";
export default {
components: {
pdf,
},
data() {
return {
javaScriptPdf,
src: "",
numPages: 0,
};
},
mounted() {
this.initPdfView();
},
methods: {
initPdfView() {
const loadingTask = pdf.createLoadingTask(
"http://localhost:8081/8a36320a5811132b30cafd656cb6b75e.pdf" //import引入的本地文件pdf地址
);
this.src = loadingTask;
this.src.promise.then((pdf) => {
this.numPages = pdf.numPages;
});
},
},
};
</script>
<style scoped>
.pdf-wrap {
height: 100vh;
}
</style>
|
vue-pdf 使用问题
vue-cli@5 的版本使用会有很多错误信息，但不影响 pdf 加载和打包，可以尝试配置取消全屏错误弹层
环境：vue-cli@5.x + vue-pdf@4.3.0
1
2
3
4
5
6
7
| module.exports = defineConfig({
devServer: {
client: {
overlay: false,
},
},
});
|
v-on handler: "TypeError: Cannot read properties of undefined (reading 'catch')"错误
这个错误，在 vue-cli@4 和@5 版本都可能出现，解决方案是 vue-pdf 版本降级，需要同时安装 pdfjs-dist， 参考方案
1
| yarn add pdfjs-dist@2.5.207 vue-pdf@4.2.0
|
vue-pdf-embed
默认全部显示，只需要设置 source 即可
vue2 使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <template>
<div class="pdf-wrap">
<VuePdfEmbed :source="javaScriptPdf"></VuePdfEmbed>
</div>
</template>
<script>
import VuePdfEmbed from "vue-pdf-embed/dist/vue2-pdf-embed";
import javaScriptPdf from "@/assets/javaScript.pdf";
export default {
components: {
VuePdfEmbed,
},
data() {
return {
javaScriptPdf,
};
},
};
</script>
<style scoped>
.pdf-wrap {
height: 100vh;
}
</style>
|
vue3 使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <script setup>
import { ref } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import javaScriptPdf from "@/assets/javaScript.pdf";
import "vue-pdf-embed/dist/style/index.css";
import "vue-pdf-embed/dist/style/annotationLayer.css";
import "vue-pdf-embed/dist/style/textLayer.css";
const pdfSource = ref(
"http://localhost:8081/8a36320a5811132b30cafd656cb6b75e.pdf"
);
</script>
<template>
<VuePdfEmbed annotation-layer text-layer :source="pdfSource" />
</template>
|
报错信息
在 vue3 使用时，会报错，提示需要安装 babel 的插件
1
| Syntax Error: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.
|
详细如下图
安装@babel/plugin-transform-private-methods 后在 babel 配置文件中添加,重新运行即可
1
2
3
4
| module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [["@babel/plugin-transform-private-methods"]],
};
|
总结
根据这次替换 pdf 插件带来的感觉，因为 vue-pdf 已经很久没有更新也不清楚是否还会维护，vue-pdf-embed 同时支持 vue2 和 vue3，在后续项目中可以优先考虑 vue-pdf-embed 来使用