vue-pdf-canvas v1.0.0

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

Events