@vensst/export-file v1.0.2

export-file

js导出文件（excel、图片、pdf）

使用

npm

npm install @vensst/export-file --save

import {toExcel, toImage, toPdf} from '@vensst/export-file'
// 或
import exportFile from '@vensst/export-file'

unpkg

<script src="https://unpkg.com/@vensst/export-file@版本号/lib/main.js"></script>

说明

示例

toExcel(options)

• @param {Object} options 导出 excel 配置项
• @param {HTMLElement} options.element 需要导出的 html 根节点
• @param {Array} options.multiHeader 多级表头(二维数组)
• @param {Array} options.title 标题
• @param {Array} options.header 表头
• @param {Array} options.data 数据
• @param {Array} options.footer 表尾
• @param {Array} options.merges 合并单元格（单元格地址格式，例如:"A10:E10"）
• @param {String} options.fileName 文件名
• @param {String} options.bookType 文件类型
• @param {Boolean} options.autoWidth 是否自动宽度
• @param {Object} options.headerStyle 表头样式
• @param {Object} options.contentStyle 内容样式
• @param {Array} options.customCellStyle 自定义单元格样式

根据数据导出 备注：

• 可以把所有数据都放 data 中包括 multiHeader、title、header和footer，然后通过配置自定义样式 customCellStyle 就行
• xlsx-js-style 样式
• html2canvas 配置

const excelOption = {
  multiHeader: [ // 多级表头
    ["日期", "配送信息", "", "", "", "价格"],
    ["", "姓名", "地址", "", "", ""],
    ["", "", "省份", "市区", "地址", ""],
  ],
  // title: [], // 标题
  // header: [], // 表头
  data: [
    ["2016-05-03", "王小虎", "上海", "普陀区", '上海市普陀区金沙江路 1518 弄', "30.00"],
    ["2016-05-03", "王小虎", "上海", "普陀区", '上海市普陀区金沙江路 1518 弄', "30.00"],
    ["2016-05-03", "王小虎", "上海", "普陀区", '上海市普陀区金沙江路 1518 弄', "30.00"],
    ["2016-05-03", "王小虎", "上海", "普陀区", '上海市普陀区金沙江路 1518 弄', "30.00"],
    ["2016-05-03", "王小虎", "上海", "普陀区", '上海市普陀区金沙江路 1518 弄', "30.00"],
    ["2016-05-03", "王小虎", "上海", "普陀区", '上海市普陀区金沙江路 1518 弄', "30.00"],
  ], // 数据
  footer: [
    ["合计", "", "", "", "", "180.00"],
  ], // 底部(你也可以不写，放到 data 中)
  merges: ["A1:A3", "B1:E1", "F1:F3", "C2:E2", "B2:B3", "A10:E10"], // 合并单元格（使用单元格地址格式）
  fileName: "测试导出", // 文件名
  bookType: "xlsx",// 输出格式
  autoWidth: false,// 自适应宽度
  // 样式只做了替换没做合并
  headerStyle: {
    font: {
      name: "Arial", // 字体
      sz: 16, // 字体大小
      color: { // 字体颜色
        rgb: "000000"
      },
      bold: true, // 字体加粗

    },
    fill: {
      fgColor: { // 填充颜色
        rgb: "C5D9F1"
      },
    },
    alignment: {
      horizontal: 'center',
      vertical: 'center',
    },
    border: {
      top: {
        style: "thin",
      },
      bottom: {
        style: "thin",
      },
      left: {
        style: "thin",
      },
      right: {
        style: "thin",
      },
    },// 边框
  },// 表头样式
  contentStyle: {
    alignment: {
      horizontal: "left",
      vertical: "center",
      wrapText: true, // 自动换行
    },
  }, // 内容样式
  footerStyle: {
    alignment: {
      horizontal: "left",
      vertical: "center",
    },
  }, // 底部样式
  customCellStyle: [
    {
      cell: ["F10"],
      style: {
        fill: {
          fgColor: { // 填充颜色
            rgb: "FF0000"
          },
        },
      }
    },
    {
      cell: ["A10:E10"],
      style: {
        alignment: {
          horizontal: "right",
          vertical: "center",
        },
      }
    }
  ]// 自定义样式
}
exportFile.toExcel(excelOption)

根据dom元素导出

 // https://www.npmjs.com/package/xlsx-js-style?activeTab=readme
const excelOption = {
  fileName: "测试导出", // 文件名
  bookType: "xlsx",// 输出格式
  contentStyle: {
    alignment: {
      horizontal: "left",
      vertical: "center",
      wrapText: true, // 自动换行
    },
  }, // 内容样式
  customCellStyle: [
    {
      cell: ["A1:F3"],
      style: {
        font: {
          name: "Arial", // 字体
          sz: 16, // 字体大小
          color: { // 字体颜色
            rgb: "000000"
          },
          bold: true, // 字体加粗

        },
        fill: {
          fgColor: { // 填充颜色
            rgb: "C5D9F1"
          },
        },
        alignment: {
          horizontal: 'center',
          vertical: 'center',
        },
        border: {
          top: {
            style: "thin",
          },
          bottom: {
            style: "thin",
          },
          left: {
            style: "thin",
          },
          right: {
            style: "thin",
          },
        },// 边框
      }
    },
    {
      cell: ["F10"],
      style: {
        fill: {
          fgColor: { // 填充颜色
            rgb: "FF0000"
          },
        },
      }
    },
    {
      cell: ["A10:E10"],
      style: {
        alignment: {
          horizontal: "right",
          vertical: "center",
        },
      }
    }
  ]// 自定义样式
}
exportFile.toExcel({element: this.$refs.tableRef, ...excelOption})

toImage(element,options)

• @param {HTMLElement} element 需要导出的 html 根节点
• @param {Object} options 配置项
• @param {string} options.fileName 文件名，默认："未命名"
• @param {string} options.imageType 文件后缀类型，默认："png"
• @param {string} options.isDownload 是否下载，false 返回 blob 格式数据，默认：true
• @param {Object} options.html2canvas html2canvas 配置

   const b = await exportFile.toImage(this.$refs.blockRef, {
  fileName: "测试导出",
  imageType: "png",
  // isDownload: false,// 默认true-下载图片，false-返回 {canvas,blob}
  html2canvas: {
    // ... （可以添加 html2canvas配置）https://html2canvas.hertzen.com/configuration
    logging: false,
    allowTaint: false,
    useCORS: true,
    // 下面两个用来提高清晰度
    dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
    scale: 4, //按比例增加分辨率
    // background: null,
  }

})
console.log(b)

toPdf(element,options)

• @param {HTMLElement} element 需要导出的 html 根节点
• @param {Object} options 配置项
• @param {string} options.fileName 文件名，默认："未命名"
• @param {Object} options.padding 边距 默认：{top: 10, right: 10, bottom: 10, left: 10}
• @param {boolean} options.isPage 是否分页，默认：true
• @param {Object} options.html2canvas html2canvas 配置
• @param {Object} options.jspdf jspdf 配置(除了orientation、unit、format其它可配)

备注：

-html2canvas 配置 -jspdf 配置

    exportFile.toPdf(this.$refs.blockRef, {
  fileName: "测试导出",
  // padding: {top: 0, right: 0, bottom: 0, left: 0},// pdf 边距
  // isPage: false,
  // html2canvas: {
  //   logging: false,
  //   allowTaint: false,
  //   useCORS: true,
  //   scale: 4, //按比例增加分辨率
  // },
})

PdfLoader 构造函数

PdfLoader 参考

  const pdfLoader = new exportFile.PdfLoader(this.$refs.blockRef, {
  fileName: "自定义名字",
});
pdfLoader.getPdf().then((res) => {
  console.log("[ 导出成功] >", res);
});