pdf预览功能踩坑记录

淡淡的烟草味﹌ 2023-02-15 01:23 14阅读 0赞

## 前言 ##

最近接到一个`pdf`预览的需求，但是预览内容需要有当前登录用户信息的水印。于是查了一下，发现大多都是使用`pdf.js`来实现。

但是在实际使用中发现，网上大多的教程都是基于旧版本的，对于后台返回文件流的情况特别麻烦，但是在我在是选择使用较新版本的`pdf.js`后却发现网上的课程有点过时，所以在这里记录自己的踩坑记录。

我使用的`pdf.js`版本为`2.3.200`，在[pdf.js-realse下载页][pdf.js-realse]可以下载到。

## 关键代码 ##

### 单独页面预览 ###

可以直接在浏览器使用以下链接进行`pdf`预览

http://127.0.0.1:5500/pdfjs-2.3.200-dist/web/viewer.html?file=http://127.0.0.1:8080/test.pdf

### 通过iframe嵌套页面 ###

使用`iframe`嵌套页面，需要注意一定要设置宽度和高度

### 后端关键代码 ###

@CrossOrigin //允许跨域访问
        @GetMapping("{fileName}")
        public ResponseEntity<Resource> preview(@PathVariable("fileName") String fileName){
            // 从resource目录读取文件
            Resource resource = new ClassPathResource("/"+fileName);
            return ResponseEntity.ok()
                    .contentType(MediaType.APPLICATION_OCTET_STREAM)
                    .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename="+handleFileName(fileName))
                    .body(resource);
        }
    
        /**
         * 处理文件名，避免中文文件名出现乱码
         * @param fileName
         * @return
         */
        private String handleFileName(String fileName) {
            String newFileName;
            try {
                newFileName = URLEncoder.encode(fileName, "UTF-8");
            } catch (UnsupportedEncodingException e) {
                log.error(e.getMessage(), e);
                newFileName = fileName;
            }
            return newFileName;
        }

## 踩坑记录 ##

### 跨域请求 ###

注释`viewer.js`以下的源码既可

if (origin !== viewerOrigin && protocol !== 'blob:') {
            throw new Error('file origin does not match viewer\'s');
          }

### 数据流访问 ###

本版本支持数据流形式预览`pdf`，只需要将`file`后的参数改为对应的获取`pdf`文件流的`url`即可

### 获取pdf的文件带有参数 ###

如果获取`pdf`文件的`url`带有参数会导致被截断，例如以下链接

http://127.0.0.1:5500/pdfjs-2.3.200-dist/web/viewer.html?file=http://127.0.0.1:8080/test.pdf&userId=test

而在实际使用的过程中却发现实际上获取`pdf`的`url`被截取了，变成以下这样

http://127.0.0.1:5500/pdfjs-2.3.200-dist/web/viewer.html?file=http://127.0.0.1:8080/test.pdf&userId

如果需要在获取`pdf`文件流的`url`中传参数，可以参考`REST`风格在链接中传参，例如以下这样

http://127.0.0.1:5500/pdfjs-2.3.200-dist/web/viewer.html?file=http://127.0.0.1:8080/{userId}/test.pdf&

### 文件名中文 ###

如果`pdf`文件名为中文，建议使用以下代码对`url`进行编码后使用

encodeURI('http://127.0.0.1/pdfjs-2.3.200-dist/web/viewer.html?file=http://127.0.0.1:8080/中文书名.pdf')

### 预览页面汉化 ###

`pdf.js`的预览页面中的菜单栏为英文，不过其自带`locale`即可实现汉化，示例链接如下：

http://127.0.0.1:5500/pdfjs-2.3.200-dist/web/viewer.html?file=http://127.0.0.1:8080/test.pdf&locale=zh-CN

关键参数为locale=zh-CN

### 精简pdf.js组件 ###

pdf.js组件的原始大小为`11.6M`，按照以下方式精简后，大小为`4M-5M`之间

1.  删除`map`文件，分别为`pdf.js.map`、`pdf.worker.js.map`、`viewer.js.map`
2.  删除`locale`目录下不需要的语言包，注意`en-US`为默认的语言包，建议保留，其他语言包根据需要自行判断是否保留。例如我会保留`zh-CN`和`zh-TW`
3.  删除示例的`pdf`文件`compressed.tracemonkey-pldi-09.pdf`

[pdf.js-realse]: https://github.com/mozilla/pdf.js/releases