@ifun-vue2/pdf NPM

特点

支持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	初始化文档对象，同 API`getDocument`参数一致
viewportOptions	pdf页面视口配置,同 API `getViewport`参数一致	默认`{scale: 1}`
fitView	设置渲染是否适配容器大小	默认`false`，默认为pdf原始大小

`options`

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

`viewportOptions`

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

监听事件

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