本文共 1534 字，大约阅读时间需要 5 分钟。

一、引入插件

npm安装：npm install --save pdfjs 方式一：只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除，如图： 方式二：将插件直接放在static文件夹下，如图： 二、前端页面代码 方式一和方式二：特点精简

方式三：功能强大，但是引入过多无用文件，此种方式的filePath如为本地文件不进行编码也可发送请求，如为跨域文件不进行编码无法发送请求，因此建议统一进行编码。

三、后台代码实现

后台通过http请求将获取的文档流返回给前端

@Controllerpublic class ShowPdfController {
       @RequestMapping(name = "/showPdf")    public String showPdf(HttpServletRequest request, HttpServletResponse response, String pdfUrl) {
           try {
               pdfUrl = pdfUrl.trim();            URL url = new URL(pdfUrl);            HttpURLConnection conn = (HttpURLConnection) url.openConnection();            conn.setConnectTimeout(5*1000);            InputStream inputStream = conn.getInputStream();            response.setHeader("Content-Disposition", "attachment;fileName=show.pdf");            response.setContentType("multipart/form-data");            OutputStream outputStream = response.getOutputStream();            IOUtils.write(IOUtils.toByteArray(inputStream), outputStream);        } catch (Exception e) {
               e.printStackTrace();        }        return null;    }}

具体采用哪种方式实现pdf文档的在线预览，可根据项目实际情况选择，如业务简单建议使用方式一和方式二（精简），如业务复杂建议使用方式三（功能强大）。

下面列举出现的问题：

1、路径问题：vue-cli3之后的项目没有单独的static文件夹，只有public。 如果自带static文件夹或者你自己创建一个，静态资源访问路径为：/static/pdf/web/XX.pdf 如果使用高版本的public文件夹，则不用加/public，直接从下一个路径写起，例如：

/static/pdf/web/安徽XX公司能效诊断报告.pdf

2、view.html是pdf浏览插件，如果报错：

则文件路径不对。 3、如果报错意外的服务器响应，我的是IDM这个插件的问题，它拦截了服务器请求，关掉IDM的获取Chrome站点关闭即可。 还有什么问题可以评论区提问喔。

转载地址：http://cmlbi.baihongyu.com/