js将Excel转成PDF（纸张、分页、铺满、提高清晰度）-Toy模板网

这篇具有很好参考价值的文章主要介绍了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');

-文章来源地址https://www.toymoban.com/news/detail-506719.html

到了这里，关于js将Excel转成PDF（纸张、分页、铺满、提高清晰度）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！