VUE + pdfh5 实现pdf 预览

1. 安装依赖

npm install pdfh5

2.vue2 实例

• vue 文件中 创建div 节点

<template>
  <div class="wrap">
    <div id="demo"></div>
  </div>
</template>

• js 中配置

<script>
import Pdfh5 from "pdfh5";  // 这两个一定要引入
import "pdfh5/css/pdfh5.css"; // 这两个一定要引入， 这个是在加载时，顶部会出来一个加载进度条和一些其他的样式
export default {
  name: "openPdf",
  data() {
    return {
      pdfh5: null,
    };
  },
  mounted() {
    // ---------------------------- 方法一 -----------------------------
    this.pdfh5 = new Pdfh5("#demo", {
      pdfurl: "https://www.*********uanfu.pdf", // pdf 地址，请求的地址需要为线上的地址，测试的本地的地址是不可以的
      lazy: true, // 是否懒加载
      withCredentials: true,
      renderType: "svg",
      maxZoom: 3, //手势缩放最大倍数 默认3
      scrollEnable: true, //是否允许pdf滚动
      zoomEnable: true, //是否允许pdf手势缩放
    });
    // --------------------------- 方法二 ---------------------------
    //实例化
    this.pdfh5 = new Pdfh5("#demo", {
        pdfurl: "https://www**********anfu.pdf",
    });
    //监听完成事件
    this.pdfh5.on("complete", function (status, msg, time) {
        console.log("状态：" + status +"，信息：" +msg +"，耗时：" + time + "毫秒，总页数：" + this.totalNum);
    });
  },
};
</script>
 

• CSS 样式配置

<style>
.wrap {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/* html,
body, */
#demo {
  width: 100%;
  height: 100%;
}
// 这里高度没有撑满
.viewerContainer {
  height: 100%;
}
</style>

3. Vue3 实例

import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";

const refPdf = ref(null);
const LoadPdf = (url) => {
  const pdfh5 = new Pdfh5(refPdf.value, {
    pdfurl: url,
  });
  pdfh5.on("complete", (status, msg, time) => { });
};

const getDocById = (id) => {
  readPDF(id).then((res) => {
    if (res) {
      LoadPdf(window.URL.createObjectURL(new Blob([res])));
    }
  });
}

api

export function readPDF(id) {
  return request({
      url: 'business/document/readPDF/'+ id,
      method: 'get',
      responseType: 'blob'
  })
}

SpringBoot 后台代码

Controller

 @ApiOperation("查看PDF资料")
    @ApiOperationSupport(order = 5)
    @ApiImplicitParam(name = "dataId", value = "资料Id", required = true)
    @GetMapping("/readPDF/{dataId}")
    @RepeatSubmit
    public void readPDF(@PathVariable Long dataId, HttpServletResponse response) {
        documentInfoService.readPDF(dataId, response);
    }

Service

 public void readPDF(Long dataId, HttpServletResponse response) {
        BiDocumentInfo documentInfo = documentInfoMapper.selectById(dataId);
        response.reset();
        response.setContentType("application/pdf");
        InputStream inputStream = null;
        OutputStream outputStream = null;
        if (!StringUtils.isEmpty(documentInfo.getDocAttachment())) {
            String[] pathAndName = documentInfo.getDocAttachment().split("\\|");
            File file = new File(localPath + pathAndName[0]);

            //读取生成的PDF文件
            try {
                if (file.exists()) {
                    String filename = URLEncoder.encode(pathAndName[1], "UTF-8");
                    response.setHeader("Content-Disposition", "inline; filename=" + filename);
                    response.addHeader("Access-Control-Allow-Origin", "*");
                    inputStream = new FileInputStream(file);
                    outputStream = new BufferedOutputStream(response.getOutputStream());
                    byte[] bytes = new byte[1024];
                    int len;
                    while ((len = inputStream.read(bytes)) != -1) {
                        outputStream.write(bytes, 0, len);
                    }
                    outputStream.flush();
                }
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }finally {
                if (outputStream !=null){
                    try {
                        outputStream.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
                if (inputStream !=null){
                    try {
                        inputStream.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }

            }
        }

    }