javascript在线预览PDF文件 js预览本地pdf

转载

mob64ca1419a401 2023-10-10 00:04:24

文章标签 javascript在线预览PDF文件 web java pdf.js pdf.js 预览 文章分类 JavaScript 前端开发

前言

最近开发项目时有个需求是在线预览 PDF 文件，然后百度了好久选出来一个功能比较强大并且好用的插件 PDF.JS，GitHub 下载地址（不知道最近咋了每次都想唠一会水一会）差点忘了说了，本文主要是讲使用过程中的常见错误，嗯，次要是讲咋使用

安装

下载版本的话我们下在稳定版本的就可以了，没必要非追求最新版，当然也可以下载最新版本的，用法都一样，下载好了之后就找一个位置解压就可以了，或者直接放入程序里边，我们主要用到里边的 viewer.js 和 viewer.html 文件

javascript在线预览PDF文件 js预览本地pdf_pdf.js

打开文件夹，把这两个文件放进程序，一个是 build，一个是 web 文件夹，不过我建议整个文件夹都放进去！到这差不多安装过程就 ok 了,viewer.html 文件里边有默认的 PDF 文件

javascript在线预览PDF文件 js预览本地pdf_pdf.js_02

测试方法 window.open(' ../pdf/web/viewer.html')

使用

打开我们刚刚放入程序的文件，打开 web 文件目录，打开 viewer.js 文件找到他默认展示的 PDF 文件的路径改为 value:’’ ( 也可以不修改 ) 大概在 4250 行左右，不同的版本可能行数不一样，以实际名称为准 defaultUrl !!!

javascript在线预览PDF文件 js预览本地pdf_pdf.js 预览_03

我们想要调用这个 JS 来预览 PDF 应该咋办呢？？？方法跟上方测试方法差不多，只不过多加了一个条件

调用方法：windows.open("/pdf/web/viewer.html?file=file.pdf"); 这样些其实有一个问题，就是它只能读取你 web 目录下的文件，如果想要读取你本地文件或者服务器文件咋办呢？当然是通过流的方式输出咯！

获取本地文件 / 服务器文件（移动端预览）

前端写法：通过点击事件触发预览

previewURL: 项目地址路径
filePath: 要打开的项目
encodeURIComponent：用于 url 特殊字符的转译（比如： ; / ? : @ & = + $ , # 这些用于分隔 URI 组件的标点符号）

// 点击调用预览方法
function xx(filePath){
	var previewURL= "127.0.0.1:8080/";
	window.open('../pdf/web/viewer.html?file='+encodeURIComponent(previewURL+"/test?url="+filePath));
}

后端写法：拿到文件地址，通过流的方式输出到移动端页面显示

// 通过文件流的方式预览 PDF 文件
@RequestMapping(value = "test")
public void pdfStreamHandeler(HttpServletRequest request, HttpServletResponse response, HttpSession session) {
	// 获取路径
    String filePath = request.getParameter("url");
    File file = new File(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) {
    }
}

测试界面

javascript在线预览PDF文件 js预览本地pdf_javascript在线预览PDF文件_04

常见问题

1.跨域错误：file origin does not match viewer’s
   解决方式：找到 viewer.js 中下方的这段代码注释掉，大概在 1793 行附近，
   PS：因为每个人的版本不一样，建议使用搜索

2.找不到文件错误：这个问题原因是因为没有获取到你本地或者服务器文件，也就是 pdf > web 目录里没有这个 pdf ，因为它默认是获取这个目录下的 pdf 文件

   解决方式：获取本地文件或者服务器文件路径，通过流的方式输出到页面上

3.文件损坏无法显示问题：出现这个问题一般都是你的 url 没有进行转码就直接请求到浏览器了，然后 url 存在的特殊字符会会让浏览器误认为你这个不是一个完整的链接

   解决方式：查看前端访问的路径是否使用 encodeURIComponent 转码