导出当前页面

/**
* this.exportTarget 的值，为页面DOM元素、
* <div ref="exportContentRef" class="export-content">xxxxx</div>
* 例如：this.exportTarget = [this.$refs.exportContentRef];
*/

  selectTool(val) {
      const params = {
        target: this.exportTarget,
        fileName: this.fileName,
      };
      switch (val) {
        case "pdf": // 资产登记
          exportPagePdfScroll(params);
          break;
        case "excel":
          exportDataExcel(this.exportExcelData, this.fileName);
          break;
        case "word":
          exportDocxByBase64(params);
          break;
        case "email":
          console.log("请联系管理员");  // 应标功能，暂无处理
          break;
      }
    }

　　

/**
 * 页面导出为pdf格式，兼容页面有滚动条情况下能完全导出页面
 * @param {*} options 属性
 * options.target: 需要截图的包裹的（原生的）DOM 对象
 * options.fileName: 导出的文件名称
 */
    import html2canvas from "html2canvas";
    import JsPDF from "jspdf";
const exportPagePdfScroll = (options) => {
  let opts = [];
  const canvasMap = [];
  options.target && options.target.forEach((shareContent, index) => {
    if (!shareContent) {
      return;
    }
    let width = shareContent.clientWidth; // 获取dom 宽度
    let height = shareContent.clientHeight; // 获取dom 高度
    canvasMap[index] = document.createElement("canvas"); // 创建一个canvas节点
    let scale = 1; // 定义任意放大倍数 支持小数
    canvasMap[index].width = width * scale; // 定义canvas 宽度 * 缩放
    canvasMap[index].height = height * scale; // 定义canvas高度 *缩放
    canvasMap[index].style.width = `${shareContent.clientWidth * scale}px`;
    canvasMap[index].style.height = `${shareContent.clientHeight * scale}px`;
    canvasMap[index].getContext("2d").scale(scale, scale); // 获取context,设置scale
    opts.push({
      scale, // 添加的scale 参数
      canvas: canvasMap[index], // 自定义 canvas
      logging: false, // 日志开关，便于查看html2canvas的内部执行流程
      width, // dom 原始宽度
      height,
      useCORS: true, // 【重要】开启跨域配置
    });
  });
  const len = opts.length;
  let PDF = new JsPDF("", "pt", "a4");
  opts.map((hItem, hIndex) => {
    html2canvas(options.target[hIndex], hItem).then(() => {
      let contentWidth = canvasMap[hIndex].width;
      let contentHeight = canvasMap[hIndex].height;
      // 一页pdf显示html页面生成的canvas高度;
      let pageHeight = (contentHeight / 592.28) * 841.89;
      // 未生成pdf的html页面高度
      let leftHeight = contentHeight;
      // 页面偏移
      let position = 0;
      // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      let imgWidth = 595.28;
      let imgHeight = (592.28 / contentWidth) * contentHeight; // 根据比例，得出图片放到pdf后需要缩小的比例后的值。
      let pageData = canvasMap[hIndex].toDataURL("image/jpeg", 1.0);
      if (leftHeight < pageHeight) {
        // 若页面内容高度，小于canvas高度，则不需要分页
        // PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        let addY = 0;
        for (let i = 0; i < hIndex; i++) {
          addY += 1 * (canvasMap[i] && canvasMap[i].height);
        }
        const canvasAddY = (592.28 / contentWidth) * addY; // 得出按照pdf高度换算后，实际绘制的高度距离
        PDF.addImage(pageData, "JPEG", 0, canvasAddY, imgWidth, imgHeight);
      } else {
        // 由于项目暂不需要到分页，所以分页的功能逻辑，暂未验证是否效果正常
        while (leftHeight > 0) {
          PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          if (leftHeight > 0) {
            PDF.addPage();
          }
        }
      }
      if (len == hIndex * 1 + 1 * 1) {
        PDF.save(`${options.fileName}.pdf`); // 这里是导出的文件名
      }
    });
  });
};

    import htmlDocx from "html-docx-js/dist/html-docx";
// 导出word文档，兼容页面有滚动条情况下能完全导出页面
const exportDocxScroll = (options) => {
  let opts = [];
  const canvasMap = [];
  options.target && options.target.forEach((shareContent, index) => {
    if (!shareContent) {
      return;
    }
    let width = shareContent.clientWidth; // 获取dom 宽度
    let height = shareContent.clientHeight; // 获取dom 高度
    canvasMap[index] = document.createElement("canvas"); // 创建一个canvas节点
    let scale = 1; // 定义任意放大倍数 支持小数
    canvasMap[index].width = width * scale; // 定义canvas 宽度 * 缩放
    canvasMap[index].height = height * scale; // 定义canvas高度 *缩放
    canvasMap[index].style.width = `${shareContent.clientWidth * scale}px`;
    canvasMap[index].style.height = `${shareContent.clientHeight * scale}px`;
    canvasMap[index].getContext("2d").scale(scale, scale); // 获取context,设置scale
    opts.push({
      scale, // 添加的scale 参数
      canvas: canvasMap[index], // 自定义 canvas
      logging: false, // 日志开关，便于查看html2canvas的内部执行流程
      width, // dom 原始宽度
      height,
      useCORS: true, // 【重要】开启跨域配置
    });
  });
  let content = `
    <!DOCTYPE html><html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      </head>
      <body>
      `;
  const len = opts.length;
  opts.map((hItem, hIndex) => {
    html2canvas(options.target[hIndex], hItem).then(() => {
      let contentWidth = canvasMap[hIndex].width;
      let contentHeight = canvasMap[hIndex].height;
      // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      let imgWidth = 595.28;
      let imgHeight = (592.28 / contentWidth) * contentHeight; // 根据比例，得出图片放到pdf后需要缩小的比例后的值。
      let pageData = canvasMap[hIndex].toDataURL("image/jpeg", 1.0);
      content += `<img src=${pageData} width=${imgWidth} height=${imgHeight}/>`;
      if (len == hIndex * 1 + 1 * 1) {
        content += "</body></html>";
        let converted = htmlDocx.asBlob(content);
        saveAs(converted, `${options.fileName}.docx`);
      }
    });
  });
};

import { export_json_to_excel } from "./Export2Excel.js";

/**
 * 页面数据导出成excel格式
 * @param {*} exportData,格式为[[1,2,3], [4,5,6], [], [7,8,9]]
 */
const exportDataExcel = (exportData, fileName = "excel文件") => {
  require.ensure([], () => {
    export_json_to_excel(exportData, fileName);
  });
};