前端实现导出数据为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中文乱码的问题。
-
使用git工具克隆一个仓库,git clone https://github.com/MrRio/jsPDF.git
-
打开jsPDF下面的fontconverter文件夹下的fontconverter.html网页。
-
需要一个字体文件,后缀为.ttf的文件,可以去网上下载也可以直接在C:\Windows\Fonts这个目录下拿。
-
填好信息,选好字体文件之后点击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`);
});
},