前端项目使用js将dom生成图片、PDF

在进行下方操作前,请你先安装 html2canvas 和 jspdf 包。

1、使用html2canvas将dom元素生成图片

javascript 复制代码
// 获取要转换的dom
const ele = document.getElementById("dom");
// 生成canvas对象
let canvas = await html2canvas(ele);

2、生成PDF对象,将生成的canvas对象转换成base64添加进PDF对象中

javascript 复制代码
// 新建JsPDF对象
const PDF = new jsPDF({
    orientation: 'p', //参数: l:横向  p:纵向
    unit: 'mm', //参数:测量单位("pt","mm", "cm", "m", "in" or "px")
    format: '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、完整代码

javascript 复制代码
// 新建JsPDF对象
const PDF = new jsPDF({
    orientation: 'p', //参数: l:横向  p:纵向
    unit: 'mm', //参数:测量单位("pt","mm", "cm", "m", "in" or "px")
    format: '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`)
相关推荐
热爱编程的小曾16 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin28 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox40 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
inxunoffice2 小时前
批量将文本文件转换为 Word/PDF/Excel/图片等其它格式
pdf·word·excel