vue 把html转成blob传给后台方法；把后台传回的blod，保存文件
// 内容需要if判断
let echHtmlWithIf = '';
if (this.chartImg.length) {
if (this.exceed10Min) {
echHtmlWithIf += `<div v-if="exceed10Min" id="chartId">` +
this.chartImg.map(item => `<img src="${item.src}" width="550"/>`)
+ `</div>`;
} else {
echHtmlWithIf += ` <p v-else class="ml20" style="margin-left: 20px;">报告生成中，预计 ` + this.Dshowtime + `分钟后生成。</p>`;
}
} else {
echHtmlWithIf = "暂无相关数据"
}
//编辑 html 内容
const html = `
<html>
<body>
<div id="pcContract">
<p style="text-align: center;font-size: 24px; font-weight: bold; line-height: 60px;">
关于${this.alarm.monitorPoint.name}报告</p>
<p class="ar-contit" style="font-size: 20px; font-weight: bold; line-height: 60px;">一、通知</p>
<div class="ar-context ml20" style="text-indent: 2em;margin: 10px 0;">${this.alarm.remark}</div>
<div class="ar-context ml20" style="text-indent: 2em;margin: 10px 0;"> 经核实，以上告警为:${this.remarkText} ，程度为:${this.resultText}。
</div>
<p style="font-size: 20px; font-weight: bold; line-height: 60px;">二、数据</p>
<p style="font-size: 18px; font-weight: bold; line-height: 60px;margin-bottom: 40px;">2.1图片：</p>
<div>
<div style="text-align: center;margin-bottom: 20px;">
${img0html}
<p>碰撞前</p>
</div>
<div style="text-align: center;margin-bottom: 20px;">
${img2html}
<p>碰撞中</p>
</div>
<div style="text-align: center;margin-bottom: 20px;">
${img4html}
<p>碰撞后</p>
</div>
</div>
<p style="font-size: 18px; font-weight: bold; line-height: 60px; margin-bottom: 40px;">2.2 加速度监测曲线：</p>
<div>
${echHtmlWithIf}
</div>
<p class="dateP" style="text-align: right; line-height: 60px;">${this.alarmDate}</p>
</div>
</body>
</html>
`;
this.html = html
直接导出 html 内容，保存到本地
const blob = new Blob([html], {
type: 'application/msword',
});
const link = document.createElement('a');
link.download = `关于${this.alarm.monitorPoint.name}报告.docx`;
link.href = URL.createObjectURL(blob);
link.click();
将 html 转 blod 并 通过formData传给后台
let html = this.html;
let blob = new Blob([html], {
type: 'application/msword'
});
let f = new FormData();
f.append('file', blob);
f.append('alarmLogId', this.id);
f.append('result', this.resultText);
f.append('remark', this.remarkText);
alarmApi.alarmLogUploadReport(f).then((res) => {
if (res.flag == 0) {
console.log(res.object)
}
})
将后台传回blod， 下载到本地为docx
const data = res
console.log(data) // Blob {size: 1502869, type: "text/xml"}
var blob = new Blob([data])
var url = window.URL.createObjectURL(blob)
var link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', `关于${this.alarm.monitorPoint.name}报告.docx`)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
推荐扩展阅读
vue 把blob传给后台方法
链接: http://t.csdnimg.cn/BApMC
