特点

• 支持URL、Blob、Base64、ArrayBuffer等格式的PDF文件预览
• 支持设定缩放比例获得更高的清晰度
• 支持设置适配容器大小

安装

npm i @ifun-vue2/pdf

使用

import IFunPdf from "@ifun-vue2/pdf";
// 样式
import "@ifun-vue2/pdf/dist/style.css";
// 使用
Vue.use(IFunPdf);

局部注册，导入组件使用：

import { IFunPdf } from "@ifun-vue2/pdf";
// 样式
import "@ifun-vue2/pdf/dist/style.css";

预览数据类型

文件地址url

保证文件url可被访问。地址同源

<template>
  <div>
    <IFunPdf :options="options" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        url: pdfUrl,
      },
    };
  },
};
</script>

二进制数据blob\ base64 \ ArrayBuffer

通过data 属性传入二进制数据

<script>
export default {
  data() {
    return {
      options: {
        data: "",
      },
    };
  },
  mounted() {
    
  },
  methods: {
    getPdf() {
      // 文件加载逻辑
      // ... 

      const fileReader = new FileReader();

      fileReader.onload = (event) => {
        let blobData = event.target.result;
        this.options.data = blobData;
      };
      fileReader.readAsArrayBuffer(res.data);
    }
  }
};
</script>

在传入base64数据时，需要通过atob将base64数据转化为blob数据。

<script>
export default {
  methods: {
    getPdf() {
      // 文件加载逻辑
      // ... 
      this.options.data = atob(res.data);
    }
  }
}
</script>

设置页面缩放scale，提高分辨率

设置合适的缩放比例额，可以获得高分辨率的图像。

<template>
  <div>
    <IFunPdf :options="options" :viewportOptions="{ scale: 5 }" />
  </div>
</template>

API 属性一览

| props | 说明 | 默认值 | | ------- | ------------------------------------------- | ------ | | options | 初始化文档对象，同 APIgetDocument参数一致 | | |viewportOptions|pdf页面视口配置,同 API getViewport参数一致|默认{scale: 1}| |fitView|设置渲染是否适配容器大小|默认false，默认为pdf原始大小 |

options

| props | 说明 | 默认值 | | ------- | ------------------------------------------------------------ | ------ | | url | Stringpdf 文档地址，需要同源 | | | data | TypedArray\|ArrayBuffer,二进制数据、base64（需要atob()） | | | ... | 其他可设置参数通pdfjs API参数 | |

viewportOptions

| props | 说明 | 默认值 | | ------- | ------------------------------------------------------------ | ------ | |scale|缩放比例|可调节获得高分辨率的图像,默认 1| |rotation|页面旋转角度|默认 0| |offsetX|页面水平偏移量|默认 0| |offsetY|页面垂直偏移量|默认 0| |...|||

监听事件

| 事件名 | 说明 | | ------ | ------------------------------------------------------------ | | finish | pdf文档加载完成，返回对象，包括 - root:pdf页面父节点；totalPagespdf总页数；clear：清空渲染；getCanvas：获取到pdf的某一页 | | error | pdf文档加载失败，返回错误信息 | | ready | 准备加载pdf文档 |