越写悦快乐之Vue项目如何集成PDF组件

Vue框架 - 图片来自简书App

今天的越写悦快乐系列文章为大家带来ue项目如何集成PDF组件的文章。做过前端开发的小伙伴都知道，我们如何在页面中集成PDF文件，也就是读取二进制数据并渲染到页面上，我们可以使用vue-pdf来快速构建页面，也可以自定义组件使用pdf-dist来直接操作PDF文档，通过获取文档信息然后根据页码依次渲染页面，接下来的文章我为大家带来Vue项目中如何集成PDF组件，也就是渲染PDF文件到页面上。

开发环境

Window 10.0.17763
Node 10.15.3
Yarn 1.16.0
Vue CLI 3.7.0
Git 2.21.0

接入步骤

添加依赖

{
  "name": "vant-tour",
  "version": "1.0.0",
  "private": true,
  "description": "An Vant Tour",
  "license": "MIT",
  "author": "Watony Weng <softweitao@126.com>",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-runtime": "^6.26.0",
    "vant": "^1.6.14",
    "vue": "^2.6.10",
    "vue-pdf": "^4.0.6",
    "vue-router": "^3.0.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-eslint": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "babel-plugin-import": "^1.8.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "postcss-pxtorem": "^4.0.1",
    "qs": "^6.7.0",
    "vue-cli-plugin-axios": "0.0.4",
    "vue-template-compiler": "^2.6.10",
    "vuejs-logger": "^1.5.3",
    "webpack": "^4.32.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "Android >= 4.0",
    "iOS >= 7"
  ]
}

vue-pdf库需要依赖babel-runtime

引入组件 - 模板部分

<pdf 
      v-for="i in numPages" 
      :key="i" 
      :src="src" 
      :page="i"/>

引入组件 - 逻辑部分

<script>
import { NavBar } from 'vant'
import pdf from 'vue-pdf'

export default {
  name: 'Verify',
  components: {
    [NavBar.name]: NavBar,
    pdf
  },
  data() {
    return {
      // 页面标题
      pageTitle: '查看业务',
      // 页面参数
      taskId: '',
      processId: '',
      key: '',
      // 模板参数
      src: undefined,
      numPages: undefined
    }
  },
  mounted() {
    // 获取参数
    this.taskId = this.$route.query.taskId
    this.processId = this.$route.query.processId
    this.key = this.$route.query.key
    // 文件渲染
    this.getPdf()
  },
  methods: {
    onClickLeft() {
      this.$router.push('upcoming')
    },
    onClickRight() {
      this.$router.push({
        path: 'review',
        query: {
          taskId: this.taskId,
          processId: this.processId,
          key: this.key
        }
      })
    },
    getPdf() {
      const url = this.axios.defaults.baseURL + this.taskId + '.PDF'
      this.$log.info(url)
      this.src = pdf.createLoadingTask(url)
      this.src
        .then(pdf => {
          this.numPages = pdf.numPages
        })
        .catch(error => {
          Toast.fail(error)
        })
    }
  }
}
</script>

运行

运行结果 - 图片来自简书App

原理分析

我们使用vue-pdf这个组件其实是利用pdfjs生成文档数据，然后通过组件进行渲染，通过PDFJS.getDocument()获取文档对象，然后根据src属性按照页码依次渲染。

参考

vue-pdf

FAQ

PDF文件有签章不显示该怎么办？

临时方案可以注释pdf-dist下的pdf.worker.js中的Sig判断

PDF文件加载报错

请参考issue

个人收获及感想

本文的使用只是pdf.js的冰山一角，若是有兴趣的朋友可以深入学习一下该开源库的渲染原理和其它用法。

今天的这篇文章我们分析和整理了如何在Vue项目中渲染PDF文件，其实是利用pdf.js来处理和渲染文件的，vue-pdf只是针对Vue封装了一些属性方法，假设我们不使用Vue也可以渲染PDF文件，只是需要我们利用pdf.js提供的方法来操作DOM，获取URL地址最后渲染在页面上。通过以上的整理和总结我们应该了解PDF文件渲染的原理以及如何封装Vue组件，最后可以在修改源代码的基础上解决一些实际的业务问题。希望大家保存学习的热情，继续构建高可用低延迟的产品和服务，为公司创建更大的价值。若是我的文章对你有所启发，那将是我莫大的荣幸。