您的位置:首页 > 房产 > 建筑 > java用pdf.js在线预览pdf文件(jeecg框架)

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

2025/2/24 7:44:31 来源:https://blog.csdn.net/u010244957/article/details/139995030  浏览:    关键词:java用pdf.js在线预览pdf文件(jeecg框架)

最近在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');//方式二:子页面弹出,显示pdfthis.$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 (本地文件,服务器文件)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com