本文主要是介绍vue 把html转成blob传给后台方法；把后台传回的blod，保存文件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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 = resconsole.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 = urllink.setAttribute('download', `关于${this.alarm.monitorPoint.name}报告.docx`)document.body.appendChild(link)link.click()document.body.removeChild(link)
推荐扩展阅读
vue 把blob传给后台方法
链接: http://t.csdnimg.cn/BApMC
这篇关于vue 把html转成blob传给后台方法；把后台传回的blod，保存文件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
