java用pdf.js在线预览pdf文件(jeecg框架)

发布于:2024-06-30 ⋅ 阅读:(126) ⋅ 点赞:(0)

最近在jeecg框架的后台要做一个pdf在线预览的页面功能,可是每次点预览都是下载,所以就要解决这个问题,现在解决了,记录一下,防止后面踩坑。

先放代码:

下面是点“预览”按钮的点击事件,代码放到vue2的methods里面,代码如下:

      handleLook(record) {
        let token = Vue.ls.get(ACCESS_TOKEN);
        let token2 = Vue.ls.get(ACCESS_TOKEN);
        if (record && record.pdfbg) {
          let fileUrl= process.env.VUE_APP_API_BASE_URL+"/sb/dj/getPdf?url="+ record.jybg+"&token="+token2;
          let url='/pdfjs/web/viewer.html?token='+token+'&file='+encodeURIComponent(fileUrl);

          //方式一:在浏览器打开一个新页面,显示pdf
          //window.open(url, '_blank');

          //方式二:子页面弹出,显示pdf
          this.$refs.pdfViewForm.pdfUrl =url;
          this.$refs.pdfViewForm.visible = true;

        }
      },

上面代码,其中:

1、process.env.VUE_APP_API_BASE_URL:是服务器上的访问地址(https://....);

2、如果想要读取你本地文件或者服务器文件 就 通过流的方式输出,预览 PDF 文件:

/sb/Sydj/getPdf?url="+ pdfPath+"&token="+token:调用后台方法,通过拿到pdf文件地址,通过流的方式输出到移动端页面显示。

下面是后台方法:

// 通过文件流的方式预览 PDF 文件
    @RequestMapping(value = "/getPdf", method = { RequestMethod.GET, RequestMethod.POST })
    public void pdfStreamHandeler(HttpServletRequest request, HttpServletResponse response, HttpSession session) {
        // 获取路径
        String filePath = request.getParameter("url");
        File file = new File(upLoadPath+ File.separator+ filePath);
        byte[] data = null;
        try {
            // 编辑请求头部信息
            // 解决请求头跨域问题(IE兼容性 也可使用该方法)
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setContentType("application/pdf");
            FileInputStream input = new FileInputStream(file);
            data = new byte[input.available()];
            input.read(data);
            response.getOutputStream().write(data);
            input.close();
        } catch (Exception e) {
            String aaa="";
        }
    }

3、如果是想让浏览器打开一个新窗口显示pdf,就选用方式一:

window.open(url, '_blank'); 比较简单;

如果是方式二,在当前窗口弹出显示pdf,就需要iframe嵌套一下:

<iframe id="pdfPreviewIframe" :src="pdfUrl" scrolling="auto"></iframe>

下面是遇到的坑:

官方网址:PDF.js - Home

在这里,大家一般都直接点下载,那就是最新版本,这个插件最新版本里包含.mjs文件,如下图所示

记得把pdf.js插件放到public下面

本地没有问题,能正常预览pdf,但线上服务器不可以,报如下这个错,.mjs文件的不被识别为Content-Type:application/javascript;

原因:

所以果断放弃pdf.js的最新版,下载了包含.js的旧pdf.js,解决了问题。

打包的代码,都在这里了。

参考文章:使用pdf.js在线预览 PDF (本地文件,服务器文件)

                 一篇文章教你使用 PDF.JS 在线预览 PDF (本地文件,服务器文件)