vue项目中导出html文件

最新推荐文章于 2024-05-07 16:45:26 发布

木头人，嘿！

最新推荐文章于 2024-05-07 16:45:26 发布

阅读量3.8k

点赞数 1

文章标签： vue javascript

本文链接：https://blog.csdn.net/m0_46186051/article/details/116301088

版权

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>`

木头人，嘿！

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue项目中导出html文件

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

扫一扫