pdf预览pdfh5

<template><div class="container"><div id="pdfWrap"></div></div></template><script>import Pdfh5 from "pdfh5";import "pdfh5/css/pdfh5.css";export default {compo

EncodingAESKey

7100人浏览 · 2021-04-20 15:32:52

EncodingAESKey · 2021-04-20 15:32:52 发布

这篇文章主要讲解：加载pdf文档流和加载pdfurl二选的不同，重点讲解加载pdf文档流的注意方法

pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。

注意：本地绝对路径地址不能加载，跨域问题用代理或者服务端解决。
svg模式渲染存在缺陷，只能渲染普通pdf，带签名、印章的可能会渲染不全，报错，pdf.js官方目前没有给出解决方案
canvas模式本质是图片，默认进去的时候，图片在手机端被缩放，不是原分辨率，所以失真模糊。所以需要放大查看pdf

==================================================================================================

pdf使用文档可以参考：https://github.com/EncodingAESKey/pdfh5/blob/master/README.md

一、npm安装方式（适应于vue）, react使用方法类似vue（example/react-test是react使用示例）

案例版本："pdfh5": "^1.3.20"

npm install pdfh5

注意：按下面的方式引用css使用

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

二、使用：加载pdf文档流，加载pdf链接

渲染pdf方法：

<!--存放pdf的标签-->
<div id="pdfWrap"></div>


/** 初始化渲染（vue） */
mounted() {
    this.loadPdfBlob();
},
methods: {
    loadPdfBlob() {
      fetch("请求地址", {
        method: 'get',
        headers: {}, //自定义headers头数据
      }).then((response) => {
        // 转换为blob数据
        response.blob().then(b => {
          const url = window.URL.createObjectURL(b); 
          this.loadPdf(url); 
        })
      }).then((json) => {
        console.log(json);
      }).catch((error) => {
        console.error(error);
      });
    },
    // 加载pdf文档
    loadPdf (datas) {
      //实例化
      this.pdfh5 = new Pdfh5("#pdfWrap", {
        // pdfurl: "/static/pdf-dist.pdf",
        pdfurl: datas,
        // data: datas,  //流数据
        URIenable: true, //true开启地址栏file参数
        renderType: 'svg', //pdf渲染模式 svg canvas
        lazy: false, //是否开启懒加载
        maxZoom: 3, //手势缩放最大倍数 默认3
        scrollEnable: true, //是否允许pdf滚动
        zoomEnable: true, //是否允许pdf手势缩放
      });
      //监听完成事件
      this.pdfh5.on("complete", (status, msg, time) => {
        console.log("状态：", status, ", 信息：", msg, ", 耗时：", time, "毫秒，总页数：", this.totalNum);
      });
      // pdf 监听加载失败，msg信息，time耗时
      this.pdfh5.on("error", (msg, time) => {
        console.log("pdf加载失败", "信息：", msg, ", 耗时：", time, "毫秒");
      })
    },
},

获取到的数据格式如下：