js将Excel转成PDF(纸张、分页、铺满、提高清晰度)

news/2024/7/21 7:03:12 标签: excel, pdf, javascript

依赖:

<script src="./js/html2canvas.min.js"></script>
<script src="./js/jspdf.min.js"></script>

示例html DOM:

<div id="page1" style="width: 2000px;">内容</div>

核心js:

javascript">// html转pdf
  function html_2_pdf(dom_id, pdf_name) {
    // 预定参数
    let scale = 3; // 图片清晰度倍率,越大越清晰,默认1,建议2
    let pdf_img_scale = scale - 0.2; // 图片填充pdf倍率,使内容尽量铺满pdf
    let dpi = window.devicePixelRatio * scale;
    let page_model = "choose"; // choose:自动选择模式,其他值则使用a4模式(太宽的内容平铺后字变小)

    // html参数
    let html_dom = document.getElementById(dom_id);
    let dom_width = html_dom.offsetWidth;
    let dom_height = html_dom.offsetHeight;

    if (!dom_id || !pdf_name || !html_dom || !dom_width || !dom_height){
      console.info("dom参数不全:", [dom_id, pdf_name, html_dom, dom_width, dom_height]);
      return;
    }

    html2canvas(html_dom, { // html转图片
      logging: false,
      dpi: dpi,
      scale: scale,
    }).then(function(canvas) {

      // pdf参数:自适应纸张类型
      let cm_width = dom_width/(dpi/2.54)/10; // 像素转厘米
      let format = "a4";
      let page_width = 210 - 10; // mm,保留左右5mm空白
      let page_height = 277 - 10; // mm,保留上下5mm空白
      let orientation = "portrait";
      if (page_model === "choose"){
        if (cm_width<21.0+0.5){format = "a4";page_width= 210 - 10;page_height=277-10;}
        else if (cm_width<=29.7+0.5){format = "a3";page_width=297- 10;page_height=420- 10;}
        else if (cm_width<=42.0+0.5){format = "a2";page_width=420- 10;page_height=594- 10;}
        else if (cm_width<=59.4+0.5){format = "a1";page_width=594- 10;page_height=841- 10;}
        else if (cm_width<=84.1+0.5){format = "a0";page_width=841- 10;page_height=1189- 10;}
        else if (cm_width<=100.0+0.5){format = "b0";page_width=1000- 10;page_height=1414- 10;}
        else {format = "b0";page_width=1000- 10;page_height=1414- 10;} // 超出范围都用b0纵向排版
      }
      console.info("PDF参数:", [html_dom, pdf_name, dom_width, cm_width, format]);

      // pdf参数
      let pdf = new jsPDF({
        unit: "pt", // 单位,pt、mm
        format: format, // 页面大小,a0,a1,a2,a3,a4,b0
        orientation: orientation, // 页面方向,portrait: 纵向,landscape: 横向
        putOnlyUsedFonts: true, // 只包含使用的字体
        compress: true, // 压缩文档
        precision: 16, // 浮点数的精度
      });

      // test
      let src = canvas.toDataURL('image/jpeg', 1.0); // 图片base64,jpeg
      console.log(src);

      // 图片转pdf
      let ctx = canvas.getContext("2d");
      let imgHeight = Math.floor(page_height * canvas.width / page_width);   //按纸显示比例换算一页图像的像素高度
      let renderedHeight = 0;
      console.info("图像参数:", [canvas.width, canvas.height, page_width, page_height, imgHeight]);
      let page_num = 1; // pdf页数
      while(renderedHeight < canvas.height) { // 渲染分页,并合成pdf
        console.info("正在合成pdf页="+page_num+" ...");

        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);
        pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, page_width*pdf_img_scale, Math.min(page_height, page_width * page.height / page.width)*pdf_img_scale );    //添加图像到页面,保留10mm边距

        renderedHeight += imgHeight;
        if(renderedHeight < canvas.height){
          pdf.addPage(); // 如果后面还有内容,添加一个空页
        }

        console.info("pdf页="+page_num+" 合成完成。");
        page_num++;
      }
      console.info("合成pdf完成,请保存pdf文件。总页数="+(page_num-1), [page_num-1, dom_id, pdf_name]);
      pdf.save(pdf_name);
    });
  }

  // 调用合成函数
  // html_2_pdf('page1', 'pdf_name.pdf');

-

-

-


http://www.niftyadmin.cn/n/477317.html

相关文章

1751_使用Perl进行目录的创建于删除

全部学习汇总&#xff1a; GreyZhang/perl_basic: some perl basic learning notes. (github.com) 不管是用Perl还是Python&#xff0c;之前写代码的时候遇到需要进行目录的创建或者删除指令的时候我通常会直接调用Windows的相关命令或者使用移植过来的bash shell命令。其实&am…

react antd 样式修改

最近在做一个大数据的大屏ui更改&#xff0c;使用的是antd&#xff0c;需要根据ui稿调很多的antd组件样式 特做一个样式修改记录&#xff0c;也给需要的人一些帮助 我们修改的有以下样式&#xff1a; 如何改呢&#xff1a; /*修改 antd 组件样式 */// 仅 drop 下的下拉框改变样…

HTML5是什么

一、HTML5是什么 1.HTML5 的概念与定义 定义&#xff1a;HTML5 定义了 HTML 标准的最新版本&#xff0c;是对 HTML 的第五次重大修改&#xff0c;号称下一代的 HTML 两个概念&#xff1a; 是一个新版本的 HTML 语言&#xff0c;定义了新的标签、特性和属性 拥有一个强大的…

邮件营销的发展趋势及应对举措

电子邮件营销作为一种传统的网络营销手段&#xff0c;在如今的复杂的网络环境中&#xff0c;仍然是许多企业获取用户和提升品牌知名度的重要手段。与其他的营销渠道相比&#xff0c;邮件营销更有性价比&#xff0c;因为它成本低、针对性强、应用范围广的优势。但是&#xff0c;…

树形控件父节点不选中,只能选中子节点,如何实现?

rTree 树形控件一级菜单没有复选框&#xff0c;子菜单有复选框&#xff0c;如何实现&#xff1f;_阿 尭的博客-CSDN博客 接上一篇博客&#xff0c;继续深入功能&#xff0c;如何只选中叶子节点而不选中父节点。 1.在节点被点击时的回调&#xff0c;node-click中&#xff0c;返…

本地离线安装SeleniumIDE(Chrome)

一、插件下载 现需要准备一台可以连接外网的电脑&#xff0c;由于受到chrome的限制&#xff0c;我们可以选择搭梯子进行直接安装相应插件&#xff0c;但考虑到部分新手不会翻墙&#xff0c;本次提供一个不需翻墙的方法。 进入https://www.crx4chrome.com/crx/181591/网页内&…

精进ARM计算架构,催生人工智能产业的巨大跨越

在优化ARM计算架构以支持人工智能应用方面&#xff0c;以下是一些常见的方法和技术&#xff1a; 算法和模型设计优化&#xff1a;选择合适的算法和模型结构对于在ARM架构上高效执行人工智能任务至关重要。设计轻量级的模型、减少冗余操作和参数量&#xff0c;使用适合ARM架构的…

WuThreat身份安全云-TVD每日漏洞情报-2023-06-08

漏洞名称:MStore API plugin for WordPress 身份认证绕过漏洞 漏洞级别:严重 漏洞编号:CVE-2023-2732,CNNVD-202305-2177 相关涉及:系统-amazon_2023-sudo-*-Up to-(excluding)-1.9.13-1.p2.amzn2023.0.1- 漏洞状态:POC 参考链接:https://tvd.wuthreat.com/#/listDetail?TVD_I…