vue导出html页面

div class="contentsss" ref="test">
<-- 要到处部分的html -->
</div>
<button @click="export2Excel">导出</button>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      html: ‘’
    };
  },
  methods: {
    export2Excel() {
      var a = document.createElement("a");
      var url = window.URL.createObjectURL(
        new Blob([this.gethtml()], {
          type: ""
        })
      );
      a.href = url;
      a.download = "file.html";
      a.click();
      window.URL.revokeObjectURL(url);
    },

    gethtml() {
      const template = this.$refs.test.innerHTML;
      let html = `<!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://unpkg.com/element-ui/lib/theme-chalk/index.css" />
                    
                  </head>
                  <body>
                  <div class="resume_preview_page" style="margin:0 auto;width:1200px">
                  ${template}
                  </div>
                  </body>
                  </html>`;
      return html;
    }
  }
};
</script>
发布了12 篇原创文章 · 获赞 2 · 访问量 396

猜你喜欢

转载自blog.csdn.net/qq_42739199/article/details/104823693