使用PDF.JS实现PDF在线跨域预览功能

最新推荐文章于 2025-05-30 09:21:22 发布

qq_31734611

最新推荐文章于 2025-05-30 09:21:22 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/tao111369/article/details/79714154

本文介绍了一种在Web应用中实现PDF文件在线预览的方法，包括将PDF文件通过相对路径或远程URL调用预览页面，以及后端如何处理URL转换成流输入，确保文件能正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.将所需的两个文件夹放入WEB目录下

在前台调用VIEWER.HTML页面。

（1）若为本地文件，直接通过相对路径调用如：

window.open("../pages/web/viewer.html?file=./测试.pdf");

（2）若调用其他服务器的文件，则传入下载的URL地址(此地址直接输入浏览器应可直接下载文件)

window.open("../pages/web/viewer.html?file="+encodeURIComponent(ctxPre+"/user/salebybkdtl/convert1?filePath="+filePath));

需先通过后台将URL转换成流输入，后台代码如下:

@ResponseBody
@RequestMapping(value = "/convert1")
@HeadInit(name = HeadConstants.HEAD_SCENE, value = "Cst")
public String getPdfInfo(HttpServletRequest request, HttpServletResponse response, @RequestParam String filePath) throws IOException {
String pdfUrl = filePath;
URL url;
try {
url = new URL(pdfUrl);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setConnectTimeout(5 * 1000);
InputStream inputStream = conn.getInputStream();
response.setHeader("Content-Disposition", "attachment;fileName=结业.pdf");
response.setContentType("multipart/form-data");
OutputStream outputStream = response.getOutputStream();
IOUtils.write(IOUtils.toByteArray(inputStream), outputStream);
} catch (MalformedURLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}