目录
1.导出html
<div ref = 'testd' id ='div' onclick="evetest('11111111')" >
<span>导出html</span>
<div>
<button @click="export2Excel">导出</button>
export2Excel() {
var a = document.createElement("a");
var url = window.URL.createObjectURL(
new Blob([this.gethtml()], { //将html转化为流文件进行下载
type: ""
})
);
a.href = url;
a.download = "10.html";//下载的文件名称
a.click();
window.URL.revokeObjectURL(url);
},
gethtml() { //获取节点html
const template = this.$refs.testq.innerHTML;
let html = testing(resumecss,template)
return html;
},
2.导出css
//导出的样式
const resumecss =`
html,
.commonBorder {
// border: 1px solid #eee;
border-top:1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
height: 50px;
line-height: 50px;
}
`
3.导出js
//将需要导入插入的html返回，由于里面有script特殊标签，在.vue文件中babel编译会报错，所以另外建个.js的文件将导出需要的js包含在内
import {testing} from './test'
test.js的内容
export function testing(a,b) {
let temp = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>报表</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
${a}
</style>
</head>
<body>
<div class="resume_preview_page" style="margin:0 auto;width:1200px">
${b}
</div>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script language="javascript">
function evetest(val) {
console.log('666666666666666666',val)
var div = document.getElementById('div');
div.style.cssText='display:none;'
}
</script>
</body>
</html>`;
return temp
}
4.完整代码
//将需要导入插入的html返回，由于里面有script特殊标签，在.vue文件中babel编译会报错，所以另外建个.js的文件将导出需要的js包含在内
import {testing} from './test'
//导出的样式
const resumecss =`
html,
.commonBorder {
// border: 1px solid #eee;
border-top:1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
height: 50px;
line-height: 50px;
}
`
<div ref = 'testd' id ='div' onclick="evetest('11111111')" >
<span>导出html</span>
<div>
<button @click="export2Excel">导出</button>
export2Excel() {
var a = document.createElement("a");
var url = window.URL.createObjectURL(
new Blob([this.gethtml()], { //将html转化为流文件进行下载
type: ""
})
);
a.href = url;
a.download = "10.html";//下载的文件名称
a.click();
window.URL.revokeObjectURL(url);
},
gethtml() { //获取节点html
const template = this.$refs.testq.innerHTML;
let html = testing(resumecss,template)
return html;
},
test.js的内容
export function testing(a,b) {
let temp = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>报表</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
${a}
</style>
</head>
<body>
<div class="resume_preview_page" style="margin:0 auto;width:1200px">
${b}
</div>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script language="javascript">
function evetest(val) {
console.log('666666666666666666',val)
var div = document.getElementById('div');
div.style.cssText='display:none;'
}
</script>
</body>
</html>`;
return temp
}
5.结果：
6.包含echarts的导出
包含echarts的导出推荐是将echarts转化成为图片导出，（此处注意需要异步，因为echarts的渲染需要时间，需要等echarts渲染完毕之后，在调用echarts获取图片的方法，否则得到的图片将是没有横纵座标的图）
<div>
<img id ='div' onclick="evetest('11111111')" :src = "imgUrl" :style="
{width: '1000px', height: '500px'}" />
</div>
// 此处注意需要异步，因为echarts的渲染需要时间，需要等echarts渲染完毕之后，在调用echarts获取图片的方法，否则得到的图片将是没有横纵座标的图
async initDeviceLevel() {
var that = this;
this.DeviceLevel = echarts.init(document.getElementById("deviceLevel"));
await this.DeviceLevel.setOption({
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
// 座标轴指示器，座标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
type: "category",
data: [],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "设备IP",
type: "bar",
barWidth: "60%",
data: [],
animation: false,
}
]
});
this.imgUrl = this.DeviceLevel.getDataURL({
pixelRatio: 2,
backgroundColor: '#fff'
});
}
}
