前端实现导出数据为Word和PDF

前端实现导出数据为Word和PDF

demo使用vue框架

需要安装的库：docxtemplater、pizzip、jszip-utils、file-saver（这几个是导出Word需要的）。jspdf、jspdf-autotable、html2canvas（这几个是导出PDF需要的）。jspdf官方文档，docxtemplater官方文档

一、导出数据为Word

1、首先准备一份Word的模板文件。需要使用页面上的数据的地方使用{变量名}替换。Word文件放在

2、安装引入依赖包。

import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";

3、导出数据为Word文档。

exportWord(index, row) {
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent(
        "/outputValue.docx",
        function (error, content) {
          // 抛出异常
          if (error) {
            throw error;
          }

          // 创建一个PizZip实例，内容为模板的内容
          let zip = new PizZip(content);
          // 创建并加载docxtemplater实例对象
          let doc = new docxtemplater().loadZip(zip);
          // 设置模板变量的值，对象的键需要和模板上的变量名一致，值就是你要放在模板上的值
          let docxData = {
            id: row.id,
            alarmPeopleName: row.alarmPeopleName,
            alarmPosition: row.alarmPosition,
            alarmGis: row.alarmGis,
            alarmPhone: row.alarmPhone,
            alarmTime: row.alarmTime,
            alarmRemark: row.alarmRemark,
            handelPeople: row.handelPeople,
            handlePhone: row.handlePhone,
            statusName: row.statusName,
            alarmLevel: row.alarmLevel,
            handleTime: row.handleTime ? row.handleTime : "",
            handleResult: row.handleResult ? row.handleResult : "",
          };
          doc.setData({
            ...docxData,
          });

          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            // 抛出异常
            let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties,
            };
            console.log(JSON.stringify({ error: e }));
            throw error;
          }

          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: "blob",
            mimeType:
              "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, `警情信息${row.id}.docx`);
        }
      );
    },

二、导出数据为PDF文档

1、首先需要解决导出为PDF中文乱码的问题。

1. 使用git工具克隆一个仓库，git clone https://github.com/MrRio/jsPDF.git

2. 打开jsPDF下面的fontconverter文件夹下的fontconverter.html网页。

3. 需要一个字体文件，后缀为.ttf的文件，可以去网上下载也可以直接在C:\Windows\Fonts这个目录下拿。

4. 填好信息，选好字体文件之后点击Create生成一个字体的js文件。将这个字体文件放入项目文件夹里面

2、安转引入依赖包。

import { jsPDF } from "jspdf";
import "jspdf-autotable";
import html2canvas from "html2canvas";
import "../../utils/simhei-normal";//最先生成的字体js文件

3、导出数据为PDF文档。

exportPdf(index, row) {
      console.log(html2canvas);
      const doc = new jsPDF();
      doc.setFont("simhei");
      var pageWidth = Math.floor(
        doc.internal.pageSize.width || doc.internal.pageSize.getWidth()
      );
      var pageHeight = Math.floor(
        doc.internal.pageSize.height || doc.internal.pageSize.getHeight()
      );
      html2canvas(document.getElementById("chart-total"), {
        background: "#ffffff",
        dpi: 140,
      }).then((canvas) => {
        doc.addImage(canvas, 10, 55, pageWidth - 30, pageHeight - 90);
        const data = [
          { name: "编号", data: row.id },
          { name: "报警人员", data: row.alarmPeopleName },
          { name: "报警位置", data: row.alarmPosition },
          { name: "位置GIS", data: row.alarmGis },
          { name: "报警电话", data: row.alarmPhone },
          { name: "报警时间", data: row.alarmTime },
          { name: "报警详情", data: row.alarmRemark },
          { name: "处理人员", data: row.handelPeople },
          { name: "处理人电话", data: row.handlePhone },
          { name: "处理状态", data: row.statusName },
          { name: "告警级别", data: row.alarmLevel },
          { name: "处理时间", data: row.handleTime },
          { name: "处理结果", data: row.handleResult },
        ];
        const header = [
          { header: "名称", dataKey: "name" },
          { header: "数据", dataKey: "data" },
        ];
        doc.autoTable(header, data, {
          theme: "grid", // 主题
          //表格全局样式
          drawRow: function (row, data) {
            doc.setFontStyle("bold");
            doc.setFontSize(10);

            if (row.index === 0) {
              doc.setTextColor(200, 0, 0);
              doc.rect(
                data.settings.margin.left,
                row.y,
                data.table.width,
                row.height,
                "S"
              );
              doc.autoTableText(
                "报警信息",
                data.settings.margin.left + data.table.width / 2,
                row.y + row.height / 2,
                {
                  halign: "center",
                  valign: "middle",
                }
              );
              data.cursor.y += row.height;
            } else if (row.index === 9) {
              doc.rect(
                data.settings.margin.left,
                row.y,
                data.table.width,
                row.height,
                "S"
              );
              doc.autoTableText(
                "处理结果",
                data.settings.margin.left + data.table.width / 2,
                row.y + row.height / 2,
                {
                  halign: "center",
                  valign: "middle",
                }
              );
              data.cursor.y += row.height;
            }

            if (row.index % 5 === 0) {
              var posY = row.y + row.height * 6 + data.settings.margin.bottom;
              var pageHeight =
                doc.internal.pageSize.height ||
                doc.internal.pageSize.getHeight();
              if (posY > pageHeight) {
                data.addPage();
              }
            }
          },
          styles: {
            fillColor: [255, 255, 255], //背景色
            font: "simhei", //字体，如果不配置，中文仍会乱码
            textColor: [0, 0, 0], //字体颜色
            halign: "center", // 文字水平布局left, center, right
            valign: "middle", //垂直布局
            overflow: 'linebreak'
          },
          //表头样式配置
          headStyles: {
            fillColor: [220, 220, 220],
            lineColor: 200,
            lineWidth: 0.5,
          },
          //列的样式，key值对应header的dataKey
          columnStyles: {
            name: { columnWidth: 35 },
          },
        });
        const pageSize = doc.getNumberOfPages();
        doc.setLineWidth(0.3);
        doc.setFontSize(12);
        doc.save(`1.pdf`);
      });
    },
    name: { columnWidth: 35 },
          },
        });
        const pageSize = doc.getNumberOfPages();
        doc.setLineWidth(0.3);
        doc.setFontSize(12);
        doc.save(`1.pdf`);
      });
    },