vue html导出word文档

最新推荐文章于 2024-06-13 18:13:58 发布

shengsaihong

最新推荐文章于 2024-06-13 18:13:58 发布

阅读量597

点赞数

分类专栏： web前端开发文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/shengsaihong/article/details/119216683

版权

web前端开发专栏收录该内容

14 篇文章

订阅专栏

一、安装依赖

npm install file-saver

methods: {
    handleExport() {
        const html = this.getHtmlContent();

        var FileSaver = require("file-saver");
        let blob = new Blob([html], { type: "text/html;charset=utf-8" });
        FileSaver.saveAs(blob, `test.docx`);
    },
    getHtmlContent() {
        let contHtml = '<div>contHtmlcontHtmlcontHtmlcontHtml</div>'
        let html = `
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width,initial-scale=1.0">
                <title>值班日报</title>
                <style>
                    
                </style>
                </head>
                <body>
                <h2 style="text-align:center;">${this.exportTitle}</h2>

                <div class="preview_page" style="margin:0 auto;width:100%">
                    ${contHtml}
                </div>
                </body>
                </html>
            `;
            return html;
    }
}

ps: 导出的word文档是web版式，需要手动切换为我们熟悉的页面视图