Canvas使用和导出PDF |
您所在的位置：网站首页 › canva怎么导出pdf › Canvas使用和导出PDF |
|
文章目录
使用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 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |