vue+elementUI导出数据为WORD

导出为WORD:

  1. 获取要导出的数据;
  2. 将获取到的数据渲染到一个容器中<div id=domHtml></div,并设置样式属性:display:none;
  3. 获取容器文档内容let htmlContent = document.getElementById ('domHtml').innerHTML
    4.创建Blob对象:(放入blob对象中,转换类型,创建下载链接并执行)
 let blob = new Blob([this.htmlContent ], {
                    type: 'application/msword'
 //word文档为msword,docx为vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8,pdf文档为pdf,msexcel 为excel
                });
                let objectUrl = URL.createObjectURL(blob);
                let link = document.createElement("a");
                let fname = `文件名`; //下载文件的名字
                link.href = objectUrl;
                link.setAttribute("download", fname);
                document.body.appendChild(link);
                link.click();
PS:过程中遇到的问题:
  1. 导出后样式不起作用:(必须使用行内样式,或者将样式写到<style></style>中一起以文档流方式传入blob 对象中,而且行内样式使用margin,padding样式属性也是不会起作用的,只能使用table布局);
  2. 导出后可能个别字会被加粗:(需要在样式属性中设定统一的字体font-family属性)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,805评论 1 32
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,124评论 0 3
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,673评论 1 41
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,727评论 0 0
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 10,641评论 0 21