HTML转PDF的纯客户端和纯服务端实现方案

这篇文章主要介绍了HTML转PDF的纯客户端和纯服务端实现方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

需求

用户填写表单,点击保存之后,可以直接下载pdf文档。

解决思路

服务端生成

思路

谷歌浏览器在17年自行开发了Chrome Headless特性,并与之同时推出了 puppeteer,它可以被理解为是无界面但是可以完成服务器功能特性的浏览器。

所以我们可以在服务端启动puppeteer浏览器,打开目标网址,使用chrome浏览器自带的转换功能进行html到pdf的转换。

服务端生成核心代码

首先要安装puppeteer,npm安装可能会出错,最好使用cnpm淘宝镜像安装。

输入 cnpm i puppeteer -S 安装依赖。

创建一个js文件,只需要用puppeteer浏览器打开网址,保存pdf即可。

// html2pdf.js

const puppeteer = require(‘puppeteer’);
(async function(){
    // 启动服务
    const browser = await puppeteer.launch();
    // 打开标签页
    const page = await browser.newPage();
    // 转到该地址
    await page.goto(‘https://koa.bootcss.com/#context’);
    // html页面转pdf并保存至path
    await page.pdf({path:”test.pdf”,format:’A4′})
    // 关闭浏览器
    await browser.close();
})();

然后控制台输入 node html2pdf.js 启动服务。

当然也可以module.export将模块方法导出,根据业务逻辑来。

缺点

无法保存表单动态数据

由于是从服务端请求页面,如果不在请求地址上保存用户输入,截出来的pdf将是页面没被填写的初始状态。

换而言之,他只能进行静态页面的转换,因为我们的需求有大量用户输入,因此pass。

客户端生成核心代码

思路

使用html2canvas,输入需要转换的dom节点,遍历转换成canvas画布

将canvas画布转成base64图片,使用jsPDF创建pdf文件,把图片插入进pdf。

缺点

失真。

我们可以很明显的发现,既然是类似于对页面截图再将截图插入pdf,页面的分辨率和配置很可能影响输出图片的质量。

同时,因为是截图,可能失去页面链接等功能。

文字截断

当canvas画布大于pdf一页大小时,输出就会出错,这时我们需要判断canvas画布是否超出A4大小,如果超出,对canvas进行分割,插入到不同的页面。

这时候问题又来了,既然是分割图片,那么很可能导致图片或者文字从一半就被截断,因为我们无法分析canvas内部item的结构。

核心代码

我们的需求没有图片和链接,所以失真的问题对我们影响不大,同时我们的表单由多个重复等长的item组成,并且这些item都非常短,不会超出一张A4纸(虽然这样不严谨,如果需要,你可以获取DOM元素宽高,根据DOM元素高度裁剪)。

所以我打算直接根据item切分canvas,每个item给一页A4纸保存。

在开始之前需要理解几个核心方法:

html2canvas

   // DOM是要转换的DOM节点
    html2canvas(DOM,{
        backgroundColor:”#ffffff”,
        width:width,
        height:height,
        scale:2,
        allowTaint:true,
    }).then((canvas)=>{
        // canvas 是转换成功后的画布
    })

jsPDF

   // 创建实例
    let pdf = new jsPDF(”,’pt’,’a4′);
    // 将图片添加到pdf文件里
    // 第一个参数是待插入的文件(base64)格式,第二个是文件格式
    // 第三第四是图片左上角的坐标,最后两个是图片插入后的宽高
    pdf.addImage(image,’JPEG’,10,10,height,width);
    // 添加新的一页
    pdf.addPage()
    // 保存pdf文件
    pdf.save()

canvas

  // canvas是待剪切的图片
    // sx,sy是开始裁剪的坐标
    // swidth、sHeight是裁剪的宽高
    // dx、dy是裁剪后图像在canvas中插入的坐标
    // sWidth,sHeight是裁剪后图像在canvas中的宽高
    cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);

/**
 * @description: 表单转pdf文件
 * @return: pdf
 */
onSubmit(){
    // 这是我要转换的表单,里面有很多一样的表格
    let form = this.$refs.form;
    // 获取元素的宽高
    let width = form.getBoundingClientRect().width;
    let height = form.getBoundingClientRect().height;
    html2canvas(form,{
        backgroundColor:”#ffffff”,
        width:width,
        height:height,
        scale:2,
        allowTaint:true,
    }).then((canvas)=>{
        let pdf = new jsPDF(”,’pt’,’a4′);
        // 进行图片切割
        let canvasList = this.splitCanvas(canvas,this.forms.length);

        // 遍历canvas列表,每页添加一张图片
        canvasList.forEach((item,index)=>{
            // 转换图片格式为base64
            let itemImage = item.toDataURL(‘image/jpeg’,1.0);
            // 预留10px边距,A4纸的宽在72分辨率的显示器上是595px
            pdf.addImage(itemImage,’JPEG’,10,10,575.28,575.28/item.width*item.height);
            // 如果不是最后一页,则分页
            index == this.forms.length-1 ? ” : pdf.addPage();
        })
        // 文件保存
        let blob = pdf.output(‘blob’);
       
        pdf.save(‘test.pdf’);
    })
},
/**
 * @description: 对canvas进行切割
 * @param {number} num 切片数量
 * @param {canvas} canvas
 * @return {array} canvas列表
 */
splitCanvas(canvas,num){
    let height = canvas.height,width = canvas.width;
    let chunkHeight = height/num;// 每个切片的高度
    let chunkList = [];// 存放结果canvas
    for(let i=0; i<height ; i+=chunkHeight){
        // 初始化裁剪矩形框位置
        let sx = 0,sy = i,sWidth = width,sHeight = chunkHeight,dx = 0, dy = 0;
        // 创建一个canvas节点
        let canvasItem =document.createElement(“canvas”);
        // 初始化画布大小
        canvasItem.height = chunkHeight;
        canvasItem.width = width;
        let cxt = canvasItem.getContext(“2d”);
        // 将裁剪的图片放到新的canvas节点
        cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);
        chunkList.push(canvasItem);
    }
    return chunkList;
},

HTML转PDF的纯客户端和纯服务端实现方案

到此这篇关于HTML转PDF的纯客户端和纯服务端实现方案的文章就介绍到这了,更多相关HTML转PDF内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

来源:脚本之家

链接:https://www.jb51.net/web/722457.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:SEO优化专员,转转请注明出处:https://www.chuangxiangniao.com/p/895031.html

(0)
上一篇 2025年1月4日 00:12:44
下一篇 2025年1月4日 00:13:18

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • HTML 视频的播放控件样式怎么修改

    无法直接通过css修改html视频的默认播放控件样式。1. 使用javascript创建自定义控件。2. 通过css美化这些控件。3. 考虑兼容性、用户体验和性能,使用库如video.js或plyr可简化过程。 要修改 HTML 视频的播放…

    2025年4月30日
    000
  • html、css容易被忽略的小知识点_html/css_WEB-ITnose

    都说前端容易,谁说的。前端上手快,越往后学习越困难。学习前端快一年了,依然发现一些小的知识点不会。这些经验性的东西不碰到永远学不会。 (1)title前面的logo。 就像这个编辑文章前面的logo。不知道大家知不知道这个图标是如何加载过来…

    编程技术 2025年4月4日
    100
  • html节点属性操作

    nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> …

    编程技术 2025年4月4日
    200
  • html教程:用tabIndex轻松实现网页导航

    最近,当我在一个网站上输入表格数据时,我填写了一栏,并点击[tab]键移到下一栏;当我抬头时,我惊奇的发现光标跳到页面下方的另一栏中。我用鼠标将光标移到正确的文本栏中,但不久[tab]键又再次出现问题。这一情形使我想了解一下页面设计,以及t…

    编程技术 2025年4月4日
    200
  • html教程:WEB标准从头开始_DOCTYPE声明

    在较早之前的网页上,我们经常可以看到如下的网页结构代码: 这是一个网页 …… 立即学习“前端免费学习笔记(深入)”; …… 立即学习“前端免费学习笔记(深入)”; 很显然的,这种结构的网页代码是不符合Web标准规范的,但是浏览器仍然可以很好…

    编程技术 2025年4月4日
    200
  • 一步步学习html—-第一课

    在讲授第一课的时候,首先要给大家表明的一个概念是:我们学习的是一门语言,而不是一个编译工具,所以我们要习惯在编写程序的时候忽略编译工具的概念,因为只有忽略了编译工具,才能真正意义上的明白一门语言的精髓在哪里,也才能真正掌握一门语言到底是怎么…

    编程技术 2025年4月4日
    200
  • 一步步学习html—-第三课

    经过前面两课的学习,不知道你们对于什么是html有没有了一定程度上的了解,今天的第三课算是第一阶段的一个总结,会加入一点新的内容,但是更多的是会做总结,好了,废话不说了,进入今天的课程吧!在前两课的基础上,这一课主要是加入了一个插入图片的问…

    编程技术 2025年4月4日
    200
  • 一步步学习html—-第四课

    这一课我们主要讲解一下链接的问题:这个也可以定义为超文本链接,标签则是这个标签的全称是anchor,中文意思是锚;例子:http://www.baidu.com”>click!在网页上就会出现一个链接,其文本表现形式就是正…

    编程技术 2025年4月4日
    200
  • HTML的分段与换行代码说明

    在网页的排版中,经常会对文本进行分段和换行的操作,这两种操作由 标签 和标签来实现。 1、 -段落标签 p是英文单词“paragraph”的首字母,用来定义网页中的一段文本, 一般是成对出现。 2、-换行标签 br是英文单词“break”的…

    编程技术 2025年4月4日
    200
  • HTML的标题设置代码

    在word文档中,标题往往都需要格外醒目,例如加粗字体较大等。同样地在html文档中也可以设置标题以同样的格式显示。 我们可以用html标题标签来设置标题,一共有6个标题标签,从 到 ,数字越小,级别越高,文字也相应越大。 下面通过实例介绍…

    编程技术 2025年4月4日
    200

发表回复

登录后才能评论