vue2 之 实现pdf电子签章

一、前情提要

1. 需求

仿照e签宝，实现pdf电子签章 => 拿到pdf链接，移动章的位置，获取章的坐标

技术 : 使用fabric + pdfjs-dist + vuedraggable

2. 借鉴

一位大佬的代码仓亏 : 地址

一位大佬写的文章 ：地址

3. 优化

在大佬的代码基础上，进行了些许优化，变的更像e签宝

二、下载

ps : 怕版本不同，导致无法运行，请下载指定版本

1. fabric

fabric : 是一个功能强大且操作简单的 Javascript HTML5 canvas 工具库

npm install [email protected]

2. pdfjs-dist

npm install [email protected]

问题一

注意 : 最好配置一下babel，因为打包的时候可能会报错

因为babel默认不会转化node_modules中的包，但是pdfjs-dist用了es6的东东

// 安装包
npm install babel-loader @babel/core @babel/preset-env -D

在webpack.config.js中配置

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    resolve('src'),
    // 转化pdfjs-dist，之所以分开写，是因为pdfjs-dist里面有很多es6的语法，但是我们只需要转化pdfjs-dist里面的web文件夹下的js文件
    resolve('node_modules/pdfjs-dist/web/pdf_viewer.js'),
    resolve('node_modules/pdfjs-dist/build/pdf.js'),
    resolve('node_modules/pdfjs-dist/build/pdf.worker.js'),
    resolve('node_modules/pdfjs-dist/build/pdf.worker.entry.js')        ]
},

问题二 

pdf.js文件过大，可以给 .babelrc 加上属性，"compact": false

3. vuedraggable

npm install [email protected]

三、代码

1. 准备pdf文件

text.pdf 可放置在 src/static 文件夹中

ps : 线上最好让后端返回pdf链接，因为存在pdf跨域问题

2. 大佬的代码

3. 优化后的代码