成都科技网站建设电,浦北网站建设,360建筑网挂行情,客户管理系统内容在进行下方操作前#xff0c;请你先安装 html2canvas 和 jspdf 包。 1、使用html2canvas将dom元素生成图片
// 获取要转换的dom
const ele document.getElementById(dom);
// 生成canvas对象
let canvas await html2canvas(ele);
2、生成PDF对象#xff0c;将… 在进行下方操作前请你先安装 html2canvas 和 jspdf 包。 1、使用html2canvas将dom元素生成图片
// 获取要转换的dom
const ele document.getElementById(dom);
// 生成canvas对象
let canvas await html2canvas(ele);
2、生成PDF对象将生成的canvas对象转换成base64添加进PDF对象中
// 新建JsPDF对象
const PDF new jsPDF({orientation: p, //参数 l横向 p纵向unit: mm, //参数测量单位ptmm, cm, m, in or pxformat: a4, //A4纸
})// 将生成的canvas转换成base64添加进PDF对象中
PDF.addImage(canvas.toDataURL(image/jpeg, 1), JPEG, 10, 10);// 使用PDF.save()方法进行保存
PDF.save(${你的文件名}.pdf)
3、进阶用法 1. canvas要生成的dom高度比较大a4纸放不下怎么分页 2. 如何构建pdf文件上传到服务器中
4、完整代码
// 新建JsPDF对象
const PDF new jsPDF({orientation: p, //参数 l横向 p纵向unit: mm, //参数测量单位ptmm, cm, m, in or pxformat: a4, //A4纸
})// 将dom转换成canvas对象
const ele document.getElementById(qkqqProbationDetail);
let canvas await html2canvas(ele);
const ctx canvas.getContext(2d)//A4大小210mm x 297mm四边各保留10mm的边距显示区域190x277
const a4w 190
const a4h 277
//按A4显示比例换算一页图像的像素高度
const imgHeight Math.floor(a4h * canvas.width / a4w)
let renderedHeight 0
while (renderedHeight canvas.height) {let page document.createElement(canvas);page.width canvas.width;//可能内容不足一页page.height Math.min(imgHeight, canvas.height - renderedHeight);//用getImageData剪裁指定区域并画到前面创建的canvas对象中page.getContext(2d).putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);// canvas转图片数据保留10mm边距PDF.addImage(page.toDataURL(image/jpeg, 1), JPEG, 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width));renderedHeight imgHeight;//判断是否分页如果后面还有内容添加一个空页if (renderedHeight canvas.height) {PDF.addPage()}
}// 简单版不需要考虑分页
// PDF.addImage(canvas.toDataURL(image/jpeg, 1), JPEG, 10, 10)// **
// dataurlstring 可以拿到base64来进行你的展示
// blob 可以拿到文件流进行上传操作
const pdf_base64 PDF.output(dataurlstring);
const pdf_blob PDF.output(blob);
// 使用File构造函数和blob数据创建一个新的File对象
const file new File([pdf_blob], ${你的pdf}.pdf, {type: application/pdf,
});// ** 不上传的话直接调用保存将pdf文件保存在你的电脑上
PDF.save(${你的pdf}.pdf)
