VUE项目中集成PDF.js

在VUE项目中集成PDF.js实现PDF文件在线浏览查看。

1. 下载PDF.js相关文件

下载地址：https://mozilla.github.io/pdf.js/getting_started/#download

下载Prebuilt版本即可，如下图：

2. 解压并复制到项目public目录下

在VUE项目public文件夹下新建pdf文件夹，把刚才下载的PDF.js相关源码保持原来结构放进去，最后形成层次结构如下图所示：

3. 在页面中使用

可使用以下代码在新窗口中打开PDF文件，其中 globals.globalBaseUrl + 'file/view/' + id 为后台返回文件流的请求URL。

window.open('/pdf/web/viewer.html?file=' + window.encodeURIComponent(globals.globalBaseUrl + 'file/view/' + id));

以SpringBoot为例，后台的文件请求代码

@GetMapping("/view/{id}")
public void view(@PathVariable Integer id, HttpServletResponse response){
    // 此处省略获取文件路径的代码
    String filePath = ......
    File file = new File(filePath);
    if(file.exists()){
        byte[] data = null;
        FileInputStream input = null;
        try {
            input = new FileInputStream(file);
            data = new byte[input.available()];
            input.read(data);
            response.getOutputStream().write(data);
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            try{
                if(input != null){
                    input.close();
                }
            }catch(IOException e){
                e.printStackTrace();
            }
        }
    }
}

展示效果如下