在vue2项目中使用pdfjs组件库生成pdf文件预览或打印

yarn add jspdf

我下载后的版本是2.5.1

yarn add jspdf-autotable 我下载的版本是3.5.28

因为我要将表格展示在pdf上，所以还需要下载这个

yarn add jsbarcode 我下载的版本是3.11.5

因为在pdf上我还要把生成的条形码展示上去

引入

import jsPDF from 'jspdf'

import JsBarcode from 'jsbarcode'`、

生成实例化对象

const doc = new jsPDF({

})

doc.setFontSize(8) //设置添加到pdf上文本的字体大小，最小为1

doc.setFont('simhei')//设置添加中文的字体，这里需要下载字体，否则乱码，具体操作：

在网上下载免费字体.ttf格式(不要侵权哦)，通过rawgit.com/MrRio/jsPDF…将ttf格式转为js格式文件，在项目中引入

import '@/utils/simhei-normal'

正常引入会报错，打开这个js文件，(window系统直接打开会卡，我是mac所以直接打开来，这个是听说的哦！)，var font = '' 改``,报错消失啦

doc.text('文本内容',x,y)//向pdf中添加文本，我只用了3个参数

在这里我要添加条形码了，我是将条形码渲染到img上，在将图片渲染到pdf上，也有很多人将条形码渲染到html上或canvas上，但是我试了很多遍还是这个好用

const img = new Image()

JsBarcode(img,barcode, { height: 30, width: 1, fontSize: 12, margin: 2, })

img是容器也可以是HTMLelement,canvas

barcode是条形码到值比如123456

第三个参数是options配置项，可以查看文档，我只用了简单几个。

doc.addImage(img.src,x,y) // 插入条形码图片到pdf

接下来是插入表格

doc.autoTable({

head: [['品类', '水洗码']],

body:[['衣服','123456'],['鞋子','654321']],

startY: 30,//坐标

margin: { horizontal: 1 },//表格水平外边距

styles: {

font: 'simhei',//表格字体，不设置中文会乱码

align: 'center',//文字居中

},

options: {

pageBreak: 'auto',//超出一页pdf自动换页

},

didDrawPage: (data) => {

newY = data.cursor.y //表格高度，可以设置超出这个值doc.addPage()增加一页，因为我是无限高度的所以这里只是记录了一下，在循环下一个表格的时候添加这个高度防止重叠

},

})

const pdfData = doc.output('blob')//输出为blob文件流，这里也可以生成pdf文件流，参数上网在查一下吧

var pdfUrl = URL.createObjectURL(pdfData)//生成url

this.iframeUrl = pdfUrl//在页面通过iframe标签显示出来，这里可以设置iframe的样式调整大小显示

如果有人需要将条形码旋转后在添加到pdf上，如果单纯的改变条形码的样式是没用的，可以这么做：

let img = new Image()

JsBarcode(img, 123, measure.option)//这里的第一个参数写img或者img.src都行

img.onload = () => {

var canvas = document.createElement('canvas')

canvas.width = 46

canvas.height = 126

var ctx = canvas.getContext('2d')

// 将图片旋转90度

ctx.rotate(Math.PI / 2)

ctx.drawImage(img, 0, -canvas.width)

var dataURL = canvas.toDataURL('image/jpeg')

doc.addImage(dataURL, 47, 5)

// 使用jsPDF库生成二进制流

const pdfData = doc.output('blob')

var pdfUrl = URL.createObjectURL(pdfData)

this.iframUrl = pdfUrl

}

打印部分见后续～