目錄
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'
});
}
}
