admin管理员组文章数量:1605622
vue项目保存页面为pdf 、word
pdf下载
- 下载依赖
npm install html2canvas
npm install jspdf
- 公用方法
// 导出页面为PDF格式
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
// pdfDom
install(Vue, options) {
Vue.prototype.getPdf = function (fileName, callBack) {
var title = fileName;
html2Canvas(document.querySelector("#pdfDom"), {
allowTaint: true,
useCORS: true,
}).then(function (canvas) {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
let pageHeight = (contentWidth / 592.28) * 841.89;
let leftHeight = contentHeight;
let position = 0;
let imgWidth = 595.28;
let imgHeight = (592.28 / contentWidth) * contentHeight;
let pageData = canvas.toDataURL("image/jpeg", 1.0);
let PDF = new JsPDF("", "pt", "a4");
if (leftHeight < pageHeight) {
PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
if (leftHeight > 0) {
PDF.addPage();
}
}
}
console.log(1);
PDF.save(title + ".pdf");
console.log(2);
callBack();
});
};
},
};
- 如何实用
this.getPdf("下载的文件名", this.callback);
word下载
- 下载依赖
npm install pizzip
npm install docxtemplater
npm install jszip-utils
npm install file-saver
docxtemplater-image-module-free // 需要导出图片时
- 如何使用
需要先本地创建导出后的word 文档模版
这样导出后的格式是自己可以控制的 不会有样式丢失的问题
模版如下图
// 点击导出word
exportWord: function (callBack) {
let _this = this;
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent("helpCenter.docx", function (error, content) {
if (error) {
throw error;
}
// 创建一个PizZip实例,内容为模板的内容
let zip = new PizZip(content);
// 创建并加载docxtemplater实例对象
let doc = new docxtemplater();
doc.loadZip(zip);
// 设置模板变量的值
doc.setData({
dataList: _this.dataList,
});
try {
// 用模板变量的值替换所有模板变量
doc.render();
} catch (error) {
// 抛出异常
let e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties,
};
throw error;
}
// 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
let out = doc.getZip().generate({
type: "blob",
mimeType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
});
// 将目标文件对象保存为目标类型的文件,并命名
saveAs(out, "文件名.docx");
callBack();
});
},
- echarts图片处理
// 绘制echrts
initChart(id, xData, yData, yData2, type) {
// console.log(id, xData, yData, type);
this.rateChart = echarts.init(document.getElementById(id));
// 绘制图表
this.rateChart.setOption(
Options.BarSeriesOption(xData, yData, yData2, type)
);
this.rateChart.resize(); //echarts 自适应窗口大小
this.loading = false;
let resBase64 = this.rateChart.getDataURL({
// type: "png", // 导出的格式,可选 png, jpeg
pixelRatio: 2, // 导出的图片分辨率比例,默认为 1。
backgroundColor: "#fff", // 导出的图片背景色,默认使用 option 里的 backgroundColor
excludeComponents: ["toolbox"], // 忽略组件的列表,例如要忽略 toolbox 就是 ['toolbox'],一般也忽略了'toolbox'这栏就够了
});
this.echartsList.map((item) => {
if (item.chartId === id) {
item.img = resBase64;
}
});
// 监听屏幕缩放
window.addEventListener("resize", () => {
this.rateChart.resize();
});
this.$forceUpdate();
},
// 导出echarts图片,格式转换
base64DataURLToArrayBuffer(dataURL) {
const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
if (!base64Regex.test(dataURL)) {
return false;
}
const stringBase64 = dataURL.replace(base64Regex, "");
let binaryString;
if (typeof window !== "undefined") {
binaryString = window.atob(stringBase64);
} else {
binaryString = new Buffer(stringBase64, "base64").toString("binary");
}
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
const ascii = binaryString.charCodeAt(i);
bytes[i] = ascii;
}
return bytes.buffer;
},
// 点击导出word
exportWord: function () {
//这里要引入处理图片的插件,下载docxtemplater后,引入的就在其中了
var ImageModule = require("docxtemplater-image-module-free");
let _this = this;
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent(
"echartsDownload.docx",
function (error, content) {
if (error) {
throw error;
}
// 图片处理
let opts = {};
opts = { centered: true };
opts.getImage = (chartId, tagName) => {
return _this.base64DataURLToArrayBuffer(chartId);
};
opts.getSize = function (img, tagValue, tagName) {
//自定义指定图像大小
return [600, 200];
};
// 创建一个PizZip实例,内容为模板的内容
let zip = new PizZip(content);
// 创建并加载docxtemplater实例对象
let doc = new docxtemplater();
doc.attachModule(new ImageModule(opts));
doc.loadZip(zip);
// 设置模板变量的值
doc.setData({
..._this.form,
imgList: _this.imgList,
});
try {
// 用模板变量的值替换所有模板变量
doc.render();
} catch (error) {
// 抛出异常
let e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties,
};
throw error;
}
// 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
let out = doc.getZip().generate({
type: "blob",
mimeType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
});
// 将目标文件对象保存为目标类型的文件,并命名
saveAs(out, "文件名.docx");
}
);
},
- 图片模版
版权声明:本文标题:vue项目保存页面为pdf 、word 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1728480937a1160096.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论