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

依赖:

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

示例html DOM:

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

核心js:

// 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');

-

-

-

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值