⑴ vue与pdf.js实现预览PDF
在 Vue 项目中，为了实现PDF预览，我们需要借助PDF.js库。首先，确保在项目`src/static`文件夹下有一个下载的PDF.js库，包含`build`和`web`子文件夹。其中，`web`文件夹中的`viewer.html`是预览的核心文件。
启动项目时，使用VSCode的Live Server服务，通过浏览器访问`viewer.html`，预览的PDF文件默认链接为`compressed.tracemonkey-pldi-09.pdf`。查看`viewer.js`中的代码，特别是4242行的`defaultUrl`配置，它指示了PDF文件的路径参数，通常通过`file`参数传递。
核心预览代码示例如下：
`../../..`表示从当前iframe文件的位置向上两层，`baseUrl`根据`vue.config.js`中的`publicPath`设置，通常指向`ApprControlWeb`。`encodeURIComponent(previewUrl)`用于编码后端提供的PDF下载API的URL。
打包时，确保`static`文件夹被包含在`ApprControlWeb`包中，可以使用`-webpack-plugin`插件。在`vue.config.js`中配置后，运行`npm run build`，静态资源将被正确地打包。
另一种解决方案是直接将PDF.js包部署到项目`public`目录下，这可以避免访问静态资源时的跳转问题。在Nginx部署项目时，此方法更为便捷，且示例代码如下图所示：
[]
项目的PDF预览功能通过这些步骤实现，确保`publicPath`和静态资源的正确处理，你的项目就能成功预览PDF了。
⑵ Vue3 实现PDF预览功能（pdf.js）
实现PDF预览功能，具体步骤如下：
首先，前往官网下载pdf.js。
随后，解压下载的文件，并将解压后的文件放置在public/static目录下。
接着，利用window.open方法直接打开PDF文件。
也可采用弹框形式打开PDF预览。
若在打开过程中遇到跨域报错，需注释public/static/pdf/web/viewer.js中的相关代码。
之后，对配置项进行修改，以实现特定功能。
具体包括：
（1）调整主题色，将其设置为暗色系，以适应不同用户的阅读习惯。
(2) 设置PDF文件打开后的默认页面，方便用户快速定位至所需阅读内容。