vue 把html转成blob传给后台方法;把后台传回的blod,保存文件

本文主要是介绍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,保存文件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1032207

相关文章

问题:第一次世界大战的起止时间是 #其他#学习方法#微信

问题:第一次世界大战的起止时间是 A.1913 ~1918 年 B.1913 ~1918 年 C.1914 ~1918 年 D.1914 ~1919 年 参考答案如图所示

[word] word设置上标快捷键 #学习方法#其他#媒体

word设置上标快捷键 办公中,少不了使用word,这个是大家必备的软件,今天给大家分享word设置上标快捷键,希望在办公中能帮到您! 1、添加上标 在录入一些公式,或者是化学产品时,需要添加上标内容,按下快捷键Ctrl+shift++就能将需要的内容设置为上标符号。 word设置上标快捷键的方法就是以上内容了,需要的小伙伴都可以试一试呢!

大学湖北中医药大学法医学试题及答案,分享几个实用搜题和学习工具 #微信#学习方法#职场发展

今天分享拥有拍照搜题、文字搜题、语音搜题、多重搜题等搜题模式,可以快速查找问题解析,加深对题目答案的理解。 1.快练题 这是一个网站 找题的网站海量题库,在线搜题,快速刷题~为您提供百万优质题库,直接搜索题库名称,支持多种刷题模式:顺序练习、语音听题、本地搜题、顺序阅读、模拟考试、组卷考试、赶快下载吧! 2.彩虹搜题 这是个老公众号了 支持手写输入,截图搜题,详细步骤,解题必备

电脑不小心删除的文件怎么恢复?4个必备恢复方法!

“刚刚在对电脑里的某些垃圾文件进行清理时,我一不小心误删了比较重要的数据。这些误删的数据还有机会恢复吗?希望大家帮帮我,非常感谢!” 在这个数字化飞速发展的时代,电脑早已成为我们日常生活和工作中不可或缺的一部分。然而,就像生活中的小插曲一样,有时我们可能会在不经意间犯下一些小错误,比如不小心删除了重要的文件。 当那份文件消失在眼前,仿佛被时间吞噬,我们不禁会心生焦虑。但别担心,就像每个问题

vue, 左右布局宽,可拖动改变

1:建立一个draggableMixin.js  混入的方式使用 2:代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档:https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址:https://github.com/Hufe921/canvas-editor 前提声明: 由于CanvasEditor目前不支持vue、react 等框架开箱即用版,所以需要我们去Git下载源码,拿到其中两个主

React+TS前台项目实战(十七)-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装,可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 (1)通过position属性,可以控制下拉选项的位置 (2)通过传入width属性, 可以自定义下拉选项的宽度 (3)通过传入classN

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现    💬 系统登录注册 系统登录 登录界面   用户添加  💬 抗疫列表展示模块     区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式 📚 前言 📑博客主页:

vue+el国际化-东抄西鉴组合拳

vue-i18n 国际化参考 https://blog.csdn.net/zuorishu/article/details/81708585 说得比较详细。 另外做点补充,比如这里cn下的可以以项目模块加公共模块来细分。 import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包const cn = {mess