PdfCanvas

一个基于 pdf.js 的 PDF 渲染 Vue 组件（github）

使用方式

1. 将 pdf.js 作为 cdn 引入

import PdfCanvas from 'vue-pdf-canvas'
Vue.use(PdfCanvas)

注意：

1. 该组件依赖于 [email protected] 版本。
2. 该组件默认导出的包不包含 pdf.js，需要全局引入 [email protected] 的包，确保 window 下有 pdfjsLib 和 pdfjsWorker 这两个变量。

<script src="https://unpkg.com/[email protected]/build/pdf.js"></script>
<script src="https://unpkg.com/[email protected]/build/pdf.worker.js"></script>

3. 开发和打包时需要将 pdfjsLib 和 pdfjsWorker 进行依赖排除。

config.externals = {
  'pdfjsLib': 'pdfjsLib',
  'pdfjsWorker': 'pdfjsWorker'
}

2. 全量引入，会默认包含 pdf.js 包

这种引入方式可以直接使用，不需要额外配置

import PdfCanvas from 'vue-pdf-canvas/lib/pdfjs/index.common.js'
Vue.use(PdfCanvas)

基础用法

<el-button @click='prevPage'>上一页</el-button>
<el-button @click='nextPage'>下一页</el-button>
<el-button @click='rotate'>旋转</el-button>
<el-button @click='increase'>提高清晰度</el-button>
<el-button @click='decrease'>降低清晰度</el-button>
<el-button @click='add'>增加展示页数</el-button>
<el-table :data="tableData" style="width: 650px">
  <el-table-column prop="page" label="当前页码"></el-table-column>
  <el-table-column prop="renderNum" label="展示页数"></el-table-column>
  <el-table-column prop="rotation" label="旋转角度"></el-table-column>
  <el-table-column prop="scale" label="清晰度"></el-table-column>
</el-table>
<div style="width:600px">
  <pdf-canvas
    :src="src"
    :scale="scale"
    :page="page"
    :rotation="rotation"
    :renderNum="renderNum"
  ></pdf-canvas>
</div>

<script>
  export default {
    data() {
      return {
        src: 'https://arxiv.org/pdf/2007.07156.pdf',
        rotation: 0,
        page: 1,
        scale: 1.5,
        renderNum: 1
      }
    },
    computed: {
      tableData() {
        return [{ rotation: this.rotation, page: this.page, scale: this.scale, renderNum: this.renderNum }]
      }
    },
    methods: {
      prevPage() {
        this.page -= 1
      },
      nextPage() {
        this.page += 1
      },
      rotate() {
        this.rotation += 90
      },
      increase() {
        this.scale += 0.25
      },
      decrease() {
        this.scale -= 0.25
      },
      add() {
        this.renderNum += 1
      }
    }
  }
</script>

API

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | src | pdf 文件的 url ，可能是 string / object / uint8Array ，详情可查看 PDFJS.getDocument() | string / object / uint8Array | — | — | | page | 显示的页数 | number | — | 1 | | scale | 清晰度 | number | — | 1.5 | | rotation | 旋转角度 | number | 必须为90的倍数 | 0 | | auto | 确定 canvas 的默认尺寸是由外层盒子的宽度 100% 还是高度 100% 决定，多页模式下只能为 width | string | width / height | width | | render-num | 一次性要渲染的页数，从 page 的值开始 | number | — | 1 | | render-all | 一次性渲染全部页 | boolean | — | false |

Events

| 事件名 | 说明 | 参数 | | ---- | ---- | ---- | | pages-num | 加载完成 pdf 得到总页数时触发 | 页数 | | pdf-load | Pdf加载完成时触发 | pdf 文件路径 src | | pdf-error | Pdf加载失败时触发 | 错误信息 error | | page-load | 页面渲染完成时触发 | 渲染完成的页码 | | page-error | 页面渲染失败时触发 | 1. 渲染失败的页码 2. 错误信息 error |