前端项目使用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`)
相关推荐
Mintopia5 分钟前
Three.js 制作飘摇的草:从基础到进阶的全流程教学
前端·javascript·three.js
BillKu5 分钟前
Vue3父子组件数据双向同步实现方法
前端·javascript·vue.js
红尘散仙25 分钟前
七、WebGPU 基础入门——Texture 纹理
前端·rust·gpu
jaywongX26 分钟前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue
红尘散仙26 分钟前
八、WebGPU 基础入门——加载图像纹理
前端·rust·gpu
佳腾_28 分钟前
【Web应用服务器_Tomcat】一、Tomcat基础与核心功能详解
java·前端·中间件·tomcat·web应用服务器
天天扭码44 分钟前
深入讲解Javascript中的常用数组操作函数
前端·javascript·面试
猿究院_xyz1 小时前
跟着尚硅谷学vue-day5
前端·javascript·vue.js·前端框架·html
小杰love编程1 小时前
Django 入门指南:构建强大的 Web 应用程序
前端·django·sqlite
~heart将心比心1 小时前
chrome://inspect/#devices 调试 HTTP/1.1 404 Not Found 如何解决
前端·chrome