前端打印、生成PDF的那些事

这篇具有很好参考价值的文章主要介绍了前端打印、生成PDF的那些事。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端打印、生成PDF的那些事

概要

最近项目中经常做到前端打印、生成PDF功能这篇文章主要是记录下遇到的问题、以及实现方案

使用到的库

  • html2canvas
    npm i html2canvas
    yarn add html2canvas
  • jspdf
    npm i jspdf
    yarn add jspdf
  • print-js
    npm i print-js
    yarn add print-js

打印

这个功能我们使用到print-js库来实现

print({
	 printable: 'print-template',//需要打印的元素id
     type: "html",// 打印内容的类型
     targetStyles: ["*"],
     scanStyles: false, // 保留样式、这里需要设置为false
     style: getPrintStyle(), // 此处接受一个 css 样式字符串
})
// 将scanStyles 设置为 false 是为了更好的解决打印时出现的内容被截断的问题、此处设置为false,然后我们就可以自己写样式来定义打印模板的展示方式。

//style 的值我们可以写一个函数返回
const getPrintStyle =() => {
	return `
		#print-template {
	        font-weight: 400;
	        font-size: 12px;
	    }
	    table td {
	        padding: 8px;
	    }
	    table th {
	        white-space: nowrap;
	        padding: 8px;
	    }
	    table tr {
	        page-break-inside: avoid;
	    }
	    #print-template .date {
	        padding-bottom: 12px;
	        font-weight: 600;
	    }`
}

使用上述的方式就能解决打印内容被截断的问题了。

生成PDF

这个功能我们使用到html2canvas 和 jspdf库来实现
实现思路:将需要生成PDF的DOM节点使用html2canvas 生成 canvas 再使用 canvas.toDataURL 方法将 canvas转成图片base64、然后使用 jspdf 的 addImage方法将图片base64 转成PDF。

将二者一起封装成方法:如下

const generatePDF = (selector: string, fileName: string) => {
    const element: any = document.querySelector(selector);
    const opts = {
      scale: 12, // 缩放比例,提高生成图片清晰度
      useCORS: true, // 允许加载跨域的图片
      allowTaint: false, // 允许图片跨域,和 useCORS 二者不可共同使用
      tainttest: true, // 检测每张图片已经加载完成
      logging: true // 日志开关,发布的时候记得改成 false
    };

    return html2Canvas(element, opts)
      .then(canvas => {
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        // 一页pdf显示html页面生成的canvas高度;
        const pageHeight = (contentWidth / 592.28) * 841.89;
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight;
        // 页面偏移
        let position = 0;
        // a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
        const imgWidth = 595.28;
        const imgHeight = (592.28 / contentWidth) * contentHeight;
        const pageData = canvas.toDataURL("image/jpeg", 1.0);

        // a4纸纵向,一般默认使用;new JsPDF('landscape'); 横向页面
        const PDF = new JsPDF(undefined, "pt", "a4");
        // 当内容未超过pdf一页显示的范围,无需分页
        if (leftHeight < pageHeight) {
          // addImage(pageData, 'JPEG', 左,上,宽度,高度)设置
          PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
          // 超过一页时,分页打印(每页高度841.89)
          while (leftHeight > 0) {
            PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(fileName + ".pdf");
      })
      .catch(error => {
        console.log("打印失败", error);
      });
  };

调用:generatePDF('元素选择器', '导出的PDF文件名')
问题: 数据量大的时候、会导致生成的图片转成Base64之后太大了、最终下载下来的PDF是空的(转换失败了)、这里有一个解决方案就是将你的DOM节点进行缩放、就可以解决这个问题。如下:

#需要打印的元素ID{
	transform: scale(0.1,0.1);
}

小结

1.上述导出PDF的功能还有一些问题没有完善、例如如果内容时table表格 的时候需要精准计算每一行的高度、再进行计算最终动态改变position偏移量来解决table内容被截断的问题。后续有空补上这部分代码。文章来源地址https://www.toymoban.com/news/detail-574346.html

到了这里,关于前端打印、生成PDF的那些事的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【jspdf】前端html生成pdf的两种办法 以及 引入中文字体

    1、使用canvas把html生成图片,然后使用jspdf生成pdf。优点:生成的pdf 样式还原度极高,缺点:图片形式的pdf无法编辑 2、直接使用jspdf的html方法直接把html生成pdf。优点:可编辑,缺点:只是把文本内容搂出来生成pdf,也就是说样式基本无,而且jspdf不支持中文字体的,如果有中

    2024年02月10日
    浏览(47)
  • 前端生成pdf之html2canvas+jsPDF,以及解决图片不显示bug

    开发背景: 需要给页面中相应的内容生成pdf,查找文档后发现要用到两个插件。html2canvas 以及 jsPDF html2canvas 给dom结构转化为canvas,然后生成各种类型图片 jsPDF 把canvas 生成的图片url 转化为pdf 参数 image:表示要插入的图片资源,可以是图片文件的路径或者base64编码字符串。

    2024年02月02日
    浏览(54)
  • 【pdf技巧】PDF文件设置打印限制

    想要限制PDF文件的打印功能,想要限制PDF文件打印清晰度,都可以通过设置限制编辑来达到目的。 打开PDF编辑器,找到设置限制编辑的界面,切换到加密状态,然后我们就看到 有印刷许可。勾选【权限密码】输入一个PDF密码,在印刷许可中选择禁止打印或者设置分辨率就可

    2024年01月19日
    浏览(58)
  • vue 项目中实现pdf预览 pdf打印 pdf下载

    在Vue项目中实现PDF预览、打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件。 可以使用npm安装pdf.js,命令如下: npm install pdfjs-dist --save 创建一个PDF组件 在Vue项目中,可以创建一个PDF组件,用于显示PDF文件。 可以使用pdf.js提供

    2024年02月13日
    浏览(73)
  • 【PDF密码】PDF文件不能打印,为什么?

    正常的PDF文件是可以打印的,如果PDF文件打开之后发现文件不能打印,我们需要先查看一下自己的打印机是否能够正常运行,如果打印机是正常的,我们再查看一下,文件中的打印功能按钮是否是灰色的状态。 如果PDF中的大多数功能按钮以及打印按钮都是灰色的状态,那就证

    2024年02月13日
    浏览(63)
  • 批量打印-----jsPDF将图片转为pdf,并合并pdf

    安装依赖并引入 注意一、 使用jspdf将图片(jpg/jpeg/png/bmp)转pdf(记为pdfA),得到的pdf(pdfA)和需要合并的pdf(记为pdfB)类型不一致,需要将pdfA转为pdfB类型,才能合并,使用arraybuffer转,具体如下 注意二、 jspdf 可转pdf的图片类型有jpg、jpeg、png、bpm, 不支持 tif 和 tiff 图片类

    2024年02月13日
    浏览(49)
  • java静默打印PDF(可实现生产环境下服务器写入PDF模板,然后调用客户端打印机打印)

    需求 写这个的原因主要是因为当时项目中的打印功能是用户打印标签时,每次点击打印是通过把PDF文件下载到客户端浏览器,然后需要通过浏览器去点击打印机实现打印,就非常麻烦,每次都步骤非常复杂,而且每次参数都要重新设置。于是就想着怎么通过java实现自己调用

    2024年02月13日
    浏览(48)
  • 获取PDF流;打印报告

    思路:触发打印报告事件时,第一步需要先获取PDF流;第二部需要走打印接口。 (1)获取PDF流,拿到流先判断下; (2)成功获取到正确的pdf流后,再走打印接口,流作为打印接口的参数         因为我们会在打印成功后再做一些其他的业务操作,所以这里将打印功能封装

    2024年02月13日
    浏览(30)
  • JS打印、导出PDF

    这种方式打印的pdf比较高清,且分页不会截断文字和图片,背景图片是会被截断的 1.直接打印 直接调用浏览器的打印功能,打印整个页面 2.打印指定区域 通过开始标记、结束标记来打印,打印局部页面 注意 :1.如果你要打印的区域中包含vue赋值对象,那你的开始结束标志符

    2024年02月15日
    浏览(47)
  • 使用VBA打印PDF文件

    使用VBA打印工作表和工作簿文件都很容易实现,但是有时需要使用VBA打印已经保存在本机的其他文件,例如PDF文件格式的账单,如果这个PDF并非由Excel生成的那么就无法使用前述方法实现。 调用Windows的Shell命令可以实现打印PDF文件。 示例代码如下。 【代码解析】 第1~9行代码

    2024年02月05日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包