目录
4.将react页面中的某些元素下载为html文件并修改UI效果
前言：
这篇文章记录的是最近半个月，工作中值得记录的点，大部分时间都在死磕剧本编排功能，大概的意思是：用户只需要拖动应用的图标和箭头并配置参数就可以执行很多个动作，参考w5Soar，当然这篇文章不会写这个，将会以单独的文章来记录，时间不会太久。
1.bug:下拉框编辑功能失效
复现场景：
使用的elementUI的下拉组件（select），下拉里面的option是请求接口返回的，v-model绑定的是动态的数据 比如 v-model = form[item.name] 这种，结果编辑时回显是正常的，但是再选择其他的下拉选项时不管选什么都没变化。
原因：
到现在还不确定，盲猜和vue的数据相应监听数据变化有关。
解决方案：
在data里面设置初始值，比如form：{name:"请选择"}
2.检测对象是否包含某个属性
为什么要说这个呢，因为我之前经常这样判断：if（obj.name）{…}，即如果对象里面属性name为true则…，这个不够严谨.而接下来介绍的是我现在使用的非常好使。
推荐使用：
this.obj.hasOwnProperty("name")//对象obj里面有没有属性name3.下载功能
我将下载功能封装成了一个函数，可以在需要的时候使用，刚开始时是用来将对象下载为JSON数据。但是后面我同样利用这个函数将数据下载为.html文件，这个函数的优点是下载的数据非常直观，格式都给转换好了。
原理：
其实就是利用JavaScript创建a标签，然后设置href和download属性；
再一个就是JSON.stringify(this.data, null, '\t'))这句话，这个方法的第二三个参数作用需要了解下
// 下载数据 功能：将对象下载为JSON
downloadData () {
this.$confirm('确定要下载该流程数据吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
}).then(() => {
var datastr = "data:text/json;charset=utf-8," +
encodeURIComponent(JSON.stringify(this.data, null, '\t'))
var downloadAnchorNode = document.createElement('a')
downloadAnchorNode.setAttribute("href", datastr)
downloadAnchorNode.setAttribute("download", 'data.json')
downloadAnchorNode.click()
downloadAnchorNode.remove()
this.$message.success("正在下载中,请稍后...")
}).catch(() => {
})
},4.将react页面中的某些元素下载为html文件并修改UI效果
场景：
比如下面的图片是react项目中某页面中的一个展示框，需求是想将下面这个框给下载下来，以.html文件的形式，并且可以良好展示（修改HTML文件的样式）
解决思路：
1.首先找到这个框框，利用useRef()拿到标签
2. 组装html数据,利用模板字符串
3.使用封装的函数下载为.html文件
3.优化展示效果，通过添加类名设置样式，通过display:none去掉一些不想要的标签
代码展示如下：
<Button
onClick={(e) => {
let resHtml = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<style>
.list-item{
display:flex;
margin-bottom:30px;
}
.name1{
display:none !important;
}
.text2{
width:600px;
display:block !important;
text-align:left;
border-bottom: 1px solid #ccc;
}
.dd{
display:none !important;
}
.louDong{
color:#fff
}
</style>
</head>
<body>
${listRef.current.innerHTML}
${listRef2.current.innerHTML}
</body>
</html>
`
console.log(listRef.current)
//以下为核心代码
var datastr = "data:text/html;charset=utf-8," +
encodeURIComponent(resHtml)
var downloadAnchorNode = document.createElement("a")
downloadAnchorNode.setAttribute("href", datastr)
downloadAnchorNode.setAttribute("download", "data.html")
downloadAnchorNode.click()
downloadAnchorNode.remove()
}}
>
结果输出
</Button>
坑点难点：
1. 解析报错：
必须是listRef.current.innerHTML，而不是listRef.current，虽然这个打印出来的也是元素本身，这点很具有迷惑性，如果这样写模板字符串解析不出来，结果是【object,HTMLdiv…】
2.类型报错：
listRef.current.innerHTML这样写typescript可能会报错说listref可能为null,可以给个any解决
3.下载报错：
错误有两种一种是下载了根本没解析；另一种是下载了打不开。我也是经过尝试才成功。
如果你要下载为.html文件，请将之前我封装的函数第一行改成下面的样子，相信以后下载成其他任意类型你都可以举一反三
var datastr = "data:text/html;charset=utf-8," + encodeURIComponent(resHtml)4.页面混乱问题解决
下载完的HTML文件打开后，极大的概率是乱糟糟的，这时就需要我们重写写样式了。
技巧：
1.修改样式
首先得能找到标签，我们可以给原有得标签加类名，然后在模板字符串中的style里面编写样式文件。
2.去除多余的标签
我们可以使用display:none去隐藏
3.逻辑编写：
比如需求是下载完了还要加一些统计类的数据，这是原有的元素不具备的，这是就需要我们编写Javascript代码了，我们可以按照原始的前端写法在script标签里面编写。
