PdfCanvas

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

在线文档

使用方式

1. 将 pdf.js 作为 cdn 引入

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

注意：

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

<script src="https://unpkg.com/pdfjs-dist@2.3/build/pdf.js"></script>
<script src="https://unpkg.com/pdfjs-dist@2.3/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