vue项目中导出html文件

vue项目中导出html文件export.vueasync generate() {// 将html文件中需要用到的数据挂载到store上this.$store.commit("report", { basicmsg: this.basicmsg });// import()引入含有html代码的js文件,因为vue不支持引入html文件,只能将html代码写成字符串放到js文件中;await i

木头人，嘿！

4060人浏览 · 2021-04-30 12:37:27

木头人，嘿！ · 2021-04-30 12:37:27 发布

vue项目中导出html文件

export.vue

async generate() {
    // 将html文件中需要用到的数据挂载到store上
    this.$store.commit("report", { basicmsg: this.basicmsg });
    // import()引入含有html代码的js文件,因为vue不支持引入html文件,只能将html代码写成字符串放到js文件中;
    await import("./export.js").then((modules) => {
        const content = modules.html;
        //生成报告
        const link = document.createElement("a");
        link.download = "index.html"; // 文件名
        link.style.display = "none";
        // 创建文件流
        // 创建bolb实例时，内容一定要放在[]中
        const blob = new Blob([content], { type: "text/html" });
        link.href = window.URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }).catch((err)=>{
        consosle.log(err)
    });
}

export.js

import store from '@/store'

const basicmsg = store.state.report.basicmsg
const html = 
    `<!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>报告</title>
        <!-- import element v-chart CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
        <style>
            body {
                background-color: #f5f5f5;
            }
        </style>
    </head>
    <body>
        <div id="app">
        // content
        {{basic}}
        </div>
    </body>
    // 需要引入的依赖，一般官网上都会有，直接粘贴就可
    // 注意引入vue要在element之前，v-chart也要在element之前
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
	
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
         new Vue({
            el: '#app',
            data: function () {
                basic:{}
            },
            created(){
                // 数据要转成字符串形式拼接在html字符串中，否则会读取不到
                this.basic = ${ JSON.stringify(basicmsg) }
            }
        })
    </script>
    </html>`

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}$/, //不连续的两位字母// /^