|
文章目录
使用canvas绘图导出pdf效果示例
使用canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，你可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下载pdf
绘图
可以对canvas的基础函数进行封装，然后方便调用绘图，例如
drawLine(beginX, beginY, beginX,beginY - 100, 0.6, '#000')
drawFraction('N**', 'P**', beginX, beginY - 140,'#000', '16pt 微软雅黑')
drawArc(beginX, beginY - 240, 10, 0, 360,true, false, '#000','','#000')
drawRect2(beginX, beginY, params.width[j], bottomHeight, '#000', '')
drawText('143/476', beginX + params.width[j] + 48, beginY + bottomHeight / 2,'#000000', '', 'center')
导出pdf
使用html2canvas组件对canvas进行截图，然后利用jsPdf组件将截图放入pdf文件中，并导出pdf。这样我们可以点击按钮，立即实现这一过程，然后下载得到pdf文件。
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
toPdfAndDownload() {
let uuid = this.uuid()
// 截图区域是testCanvas
html2canvas(document.getElementById('testCanvas'), {
background: "#ffffff",
useCORS: true,
}).then(function (canvas) {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
let imgWidth = 595.28;
let imgHeight = 592.28 / contentWidth * contentHeight;
let pageData = canvas.toDataURL('image/jpeg', 1.0);
let pdf = new jsPDF('', 'pt', 'a4');
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
pdf.save(uuid + '**************.pdf');
})
},
uuid() {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i |