uni-app实现PDF预览功能（避坑看这）

目录

前言

一、下载PDF预览相关文件

二、使用步骤

---

前言

去年就想写一篇关于uni-app的pdf预览功能，拖很久了，补上。

---

一、下载PDF预览相关文件

• 下载地址
• 解压后效果：

二、使用步骤

• 在  static  文件夹下新建  pdf  文件夹，将解压文件放进  pdf  文件夹下（看网上很多博主把文件夹放在根目录里，我反正之前试到最后始终无法打开预览请求的PDF文件！  避坑  ：放在  static 文件夹下就没问题了）
• 如图所示：

•  这里以  demo  演示  pdf   预览效果
• 新建了一个  index  页面，加了一个  预览PDF  按钮

• 代码如下：

• 新建了一个  pdfView  PDF预览页面 
•  web-view  是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面，这里用它来展示PDF。

•  代码如下（  根据业务自行更改  ）：

@GetMapping("/previewPdf/{id}")
public void previewPdf(@PathVariable("id") String id) {}

•  返回文件流（Java）

    /**
     * pdf预览
     * @author luvJie-7c
     * @date 2022-8-5 17:31
     * @param fileName 文件名
     * @param path 文件路径
     * @return void
     */
    public static String previewPdf(String fileName, String path){
        //获取HttpServletResponse （静态自创建）
        HttpServletResponse response =((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getResponse();
            // 验证该文件是否是存在
            if(new File(path).exists()){
                //添加跨域访问
                response.setHeader("Access-Control-Allow-Origin", "*");
                //以流的形式传输
                response.setContentType("application/octet-stream");
                // 设置文件流编码格式
                response.setCharacterEncoding("UTF-8");
                //Content-Disposition属性名 （attachment表示以附件的方式下载;inline表示在页面内打开）
                response.setHeader("Content-Disposition", "attachment; fileName="+fileName+".pdf");
                try { //输入输出
                    FileInputStream is = new FileInputStream(path);
                    ServletOutputStream out = response.getOutputStream();
                    byte[] buffer = new byte[1024];
                    int i = 0;
                    while ((i = is.read(buffer)) != -1) {
                        out.write(buffer,0,i);
                    }
                    //缓存区的数据进行输出
                    out.flush();
                    //关闭流
                    out.close();
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
    }

---