vue实现html格式（富文本编辑器）导出word

最新推荐文章于 2024-03-08 15:10:17 发布

麻辣_水煮鱼

最新推荐文章于 2024-03-08 15:10:17 发布

阅读量2.1k

点赞数 3

分类专栏： vue 每日一记文章标签： vue.js 前端 html导出word

本文链接：https://blog.csdn.net/weixin_42217154/article/details/125439443

版权

每日一记同时被 2 个专栏收录

76 篇文章 2 订阅

订阅专栏

vue

54 篇文章 4 订阅

订阅专栏

1.导入需要的包

2.引入

3.点击事件实现导出

1.导入需要的包

html-docx-js和file-saver

npm i html-docx-js -S
npm i file-saver -S

2.引入

import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';

3.点击事件实现导出

download(rec){
    let htmlStr = rec.content;
    let page = `<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>${htmlStr}        
        </body></html>`
    // console.log(page);return
    saveAs(
        htmlDocx.asBlob(page, {
            orientation: "landscape"//跨域设置
        }),
        //文件名
        rec.name+".doc"
    )
}