vue中将包含echarts的页面导出能在浏览器打开的纯静态html格式文件

目录1.导出html2.导出css3.导出js4.完整代码5.结果：6.包含echarts的导出7.结果：1.导出html<div ref = 'testd' id ='div'onclick="evetest('11111111')" ><span>导出html</span><div>...

傻小胖

3219人浏览 · 2019-11-26 10:07:26

傻小胖 · 2019-11-26 10:07:26 发布

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

7.结果：

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^