精华内容
下载资源
问答
  • 2021-06-09 08:41:03

    需求

    在开发项目途中遇到了一个需求,就是将一个整个HTML界面导出到word文档,其中包含了echarts图表,经过一番折腾,终于完成了~~~(鸡肋),过程中用到了几个插件,总结了一下几个步骤,希望可以帮到大家。

    将插件导入项目

    d260ede50542

    顺序一定不能乱,顺序按照图中顺序导入,插件的源码网上搜一下很多的~~~

    注册echarts图表

    HTMl代码

    d260ede50542

    写一个空的div来存echarts图表

    js代码

    d260ede50542

    这里是引用的官方的例子,这样你的echarts图表就诞生了~

    调用插件导出word文档

    将页面上的文本导出到word很容易代码如下

    d260ede50542

    .main就是你要导出某个div的类名称,'检索报告'就是你导出word文档的文件名称

    如果你以上步骤都正确的执行了,那么现在你应该可以将HTML中的文本导出到word文档中了~很开心有木有

    导出echarts图表就稍微麻烦一点点了,不过也是很轻松的(查资料的时候可不是很轻松!!!)

    导出思路:将echarts图表转成图片再进行导出操作

    这里要用到echarts官方的API中的getDataURL()方法,该方法会返回一个base64编码,该编码是可以直接赋值给img的src属性的具体代码如下

    let imgSrc = myChart.getDataURL('png')

    这里的imgSrc就是base64编码了可以直接赋值给img的src属性进行使用的,这句代码是跟在注册echarts图表的myCharts.setOption(option)后面的~~,现在你只需要将base64码绑定到img的src属性就可以将echarts报表导出word文档了~~

    需要注意的点如下:

    1 因为echarts图表是动态的,所以你必须在echarts图表的series属性中设置animation: false,如果不设置的话会只有背景没有具体的数据,亲测~~~不过用延迟加载也是可以的。

    2 在进行导出的时候任何外联的css文件都是不起作用的,需要把样式写在标签上,反正我这里没有生效,大家可以试一下。

    如果有更好的办法完成此功能,欢迎私信留言讨论~

    更多相关内容
  • 给朋友捣鼓一个word文档,文档内容是给学生出的题库(嗯,朋友是个老师),从不同的文件中粘过来的题,所以文件中的序号不是按顺序来的。 检查了一下word,发现需要做的事情是这几点: 1.按规律查找到所有序号 ...

    今天鼓捣了个不太了解的东西,office-word

    给朋友捣鼓一个word文档,文档内容是给学生出的题库(嗯,朋友是个老师),从不同的文件中粘过来的题,所以文件中的序号不是按顺序来的。

    检查了一下word,发现需要做的事情是这几点:

    1.按规律查找到所有序号

    2.替换

    当然过程离不开百度,我本人对office的软件用的不是很熟练。

    第一步:找到文档空白处,插入-文档部件-域

     

    第二步:选择AutoNum,选第一种就行,然后“确定”

     

    第三步:确定之后,文档里应该会出现这个,双击选中,然后剪切。剪切之后注意,到替换完成之前不要使用剪贴板,也就是不要使用 ctrl+c 或者 ctrl+v

     

    第四步:ctrl+H,全局替换,搜索条件:^13[0-9]{1,}.

    ^13 表示换行,因为想查询的模式是:“数字.”,但是文中查询了下有30.6这样类似的数字,所以为了避免匹配到这样的,加了换行符

    这句匹配条件就是,匹配所有 换行+数字+.  

    替换为的表达式是:^13^13^c.    要保留原先的换行,并且之前挤成一堆太难受了,所以多加一个换行,再加上.和两个空格

                                    ^c 应该就代指前面剪切到剪贴板的内容,所以中间不能做别的复制粘贴操作。

    下图是转换之后的样子

     

    之前的样子忘记截图了,大概就是如下图

     

     

    本以为到此就结束了,还好重新核对了一下发现了个大问题!里面的序号不全都是这种字符串格式的,还有自动编号的!自动编号的不能被匹配上!!!

    所以重新撤销,退回到最开始版本,想一次性自动排序到位,想了想还是应该先解决自动排序的问题。

    取消自动排序并且保留序号为字符串,这个查了一通也很让人头疼,有几个方法完全不管用,包括word选项的问题,看了下word中自动排序的只有23个编号,我很想直接手动改了,但是感觉实在太low了!

    于是最后研究出来一种方案:

    没有原文档图,参考demo文件:

    1.考虑到列表有的有缩进,所以现调整列表缩进,选中所有需要取消自动排序的项,右击-调整列表缩进

       把编号位置和文本缩进都改为0,并且把“编号之后”改为“不特别标注”,默认是“制表符”,所以空隙很大。调整为空格的话,考虑到等下还要重新再来一遍上面的操作步骤,而word中其他的编号是没有空格的,所以此处不保留空格

    2. 再次选中所有需要取消自动排序的项,右击-复制

    3.开始-粘贴-选择性粘贴,选择无格式文本,然后点击“确定”

           

     

    4.大功告成!o(╥﹏╥)o 然后再来一遍上面的从插入域开始的步骤,将序号查找替换,就OK啦

     

    不得不说,word中的公式,包括匹配规则之类的,如果能使用熟练还是很有效率的!

    展开全文
  • Swagger导出word和excel文档

    千次阅读 2022-03-28 12:40:48
    参考博文 1、Swagger文档Word 文档 2、提取swagger内容到csv表格,excel可打开

    之前写了篇关于Swagger2的博文 Swagger2生成在线接口文档并导出pdf文件,可以把swagger在线接口文档导出成pdf文件本地查看,当然swagger2本身是支持导出markdown格式的,所以这两种格式没啥问题了。
    现在有个需求是这样的:把接口和接口描述放在表格里呈现出来,那么要么是excel的表格,要么是word的表格,两种格式都试一下

    一、Excel格式

    第三方的项目源码在这里:https://github.com/ghdefe/swagger-json-to-csv,下载下来导入到Idea

    核心代码如下:

    public class JsonToTxtApplication {
    
        public static void main(String[] args) throws IOException {
            SpringApplication.run(JsonToTxtApplication.class, args);
            FileInputStream in = new FileInputStream("1.txt");
            JsonNode jsonNode = new ObjectMapper().readTree(in);
    
            /**
             * 取所有数据并存到HashMap中
             */
            String api;
            HashMap<String, List<Root>> hm = new HashMap<>();
            JsonNode node = jsonNode.findValue("paths");
            Iterator<String> stringIterator = node.fieldNames();
            while (stringIterator.hasNext()) {
            	//api
                JsonNode tags = node.findValue((api = stringIterator.next())); 
                Iterator<String> methodsname = tags.fieldNames();
                while (methodsname.hasNext()) {
                	//方法
                    String method = methodsname.next(); 
                    JsonNode methods = tags.findValue(method);
                    String name = methods.findValue("tags").get(0).asText();
                    String description = methods.findValue("description").asText();
    				//当前查询到的一个接口数据放到hashmap里管理
                    Root root = new Root(name, method, api,description);  
                    if (hm.containsKey(root.getName())) {
                        List<Root> roots = hm.get(root.getName());
                        roots.add(root);
                        hm.put(root.getName(), roots);
                    } else {
                        ArrayList<Root> roots = new ArrayList<>();
                        roots.add(root);
                        hm.put(root.getName(), roots);
                    }
    
                }
    
            }
    
            /**
             * 获得name的顺序,并按顺序写入csv
             */
            File file = new File("result.csv");
            //excel不能读取utf-8编码的csv文件
            BufferedWriter bufferedWriter = new BufferedWriter(new OutputStreamWriter(
                    new FileOutputStream(file), "GBK"));    
    
            Iterator<JsonNode> names = jsonNode.findValue("tags").iterator();
            while (names.hasNext()) {
                String name = names.next().findValue("name").asText();
                Iterator<Root> iterator1 = hm.get(name).iterator();
                bufferedWriter.write(name + ",");
                Boolean isFirst = true;
                //如果是第一行增加name,如果不是填入空白格
                while (iterator1.hasNext()) {          
                    if (!isFirst) {
                        bufferedWriter.write(",");
                    } else {
                        isFirst = false;
                    }
                    Root next = iterator1.next();
                    bufferedWriter.write(next.getMethod() + "," +
                            next.getApi() + "," + next.getDescription());
                    bufferedWriter.newLine();
                }
    
            }
            bufferedWriter.close();
         //打开生成的csv文件
            Runtime.getRuntime().exec("cmd /c start C:/Export/result.csv");
            System.out.println("done");
    
    
        }
    
    }
    

    此方法输入的是swagger json文件(api-docs),比如说你的swagger在线接口文档地址为
    http://localhost:8073/doc.html,同时你的swagger配置文件里设置了groupName(“test”),那么你的swaager json在线地址为
    http://localhost:8073/v2/api-docs?group=test,把这个链接下的内容复制下来就是该方法的输入文件,即代码中的1.txt
    此方法输出的结果是一个csv文件,表格形式列出接口,如下图
    在这里插入图片描述

    二、Word格式

    word格式就比excel要稍微复杂一点了
    同样我们使用第三方的轮子,https://github.com/JMCuixy/swagger2word
    改一下templates文件夹下的模板文件,来生成我需要的word格式接口文档
    使用起来也很方便了,直接使用上一步生成csv的源文件1.txt,当然直接用http://localhost:8073/v2/api-docs?group=test地址也行更方便
    在这里插入图片描述
    点击try it out,执行接口,可能需要一点时间,执行完成后,点击下载
    在这里插入图片描述
    不合适的可以更改模板样式,模板文件在这里
    在这里插入图片描述
    打开word文件查看效果
    在这里插入图片描述

    三、参考博文

    1、Swagger文档转Word 文档

    2、提取swagger内容到csv表格,excel可打开

    展开全文
  • 在前端如何玩转 Word 文档

    千次阅读 2020-07-20 17:14:31
    在日常工作中,大部分人都会使用 Microsoft Office Word、WPS 或 macOS Pages 等文字处理程序进行 Word 文档处理。除了使用上述的文字处理程序之外,对...

    在日常工作中,大部分人都会使用 Microsoft Office Word、WPS 或 macOS Pages 等文字处理程序进行 Word 文档处理。除了使用上述的文字处理程序之外,对于 Word 文档来说,还有其他的处理方式么?答案是有的。

    接下来阿宝哥将介绍在前端如何玩转 Word 文档,阅读本文之后,你将了解以下内容:

    • Microsoft Office Word 支持的文件格式和 Docx 文档的特点;

    • 如何将 Word 文档转换成 HTML 文档;

    • 如何在浏览器中处理 ZIP 文档;

    • 如何将 Word 文档转换成 Markdown 文档;

    • 如何在前端动态生成 Word 文档。

    小伙伴们准备好了吗,「玩转 Word 文档之旅」 开始了,Let's go!

    一、Microsoft Office Word 简介

    Microsoft Office Word 是微软公司的一个文字处理器应用程序。它最初是由 Richard Brodie 为了运行 DOS 的 IBM 计算机而在 1983 年编写的。随后的版本可运行于 Apple Macintosh(1984 年)、SCO UNIX 和 Microsoft Windows(1989 年),并成为了 Microsoft Office 的一部分。

    Word 给用户提供了用于创建专业而优雅的文档工具,帮助用户节省时间,并得到优雅美观的结果。一直以来,Microsoft Office Word 都是最流行的文字处理程序。

    1.1 Word 支持的文件格式

    下表列出了常见的几种 Word 支持的文件格式,按扩展名的字母顺序排序。

    若想了解 Word 所有支持的格式,可参考微软 office-file-format-reference 在线文档。目前大家接触比较多的是扩展名为 .docx 的文档,因此它就是本文的主角。

    1.2 Docx 文档

    俗话说 “知己知彼百战百胜”,在 “出战” 前我们先来简单了解一下 「docx」 文档。「97-2003 的旧版本文件名后缀就是 .doc, 2007 版以后的后缀名是 .docx」。docx 格式是被压缩过的文档,体积更小,能处理更加复杂的内容,访问速度更快。

    实际上 「docx」 文档是一个压缩文件( ZIP 格式)。ZIP 文件格式是一种数据压缩和文档储存的文件格式,原名 Deflate,发明者为菲尔·卡茨(Phil Katz),他于 1989 年 1 月公布了该格式的资料。ZIP 通常使用后缀名 “.zip”,它的 MIME 格式为 「application/zip」

    这里阿宝哥已经提前准备了一个包含阿宝哥头像和某些文本的 「abao.docx」 文档,接着复制一份重命名为 「abao.zip」,然后使用 ZIP 压缩/解压软件进行解压。

    通过观察解压后的目录,我们发现 Word 文档由一系列的 XML 文件和多媒体文件组成, 「abao.docx」 文档中的阿宝哥头像,最终被解压到 「word/media」 目录下。下面我们来查看一下 abao 文件夹的目录结构:

    -rw-rw-r--@  1 fer  staff  1641  7 11 01:25 [Content_Types].xml
    drwxr-xr-x@  3 fer  staff    96  7 11 09:41 _rels
    drwxr-xr-x@  4 fer  staff   128  7 11 09:41 docProps
    drwxr-xr-x@ 13 fer  staff   416  7 11 09:42 word
    

    很明显 abao 目录下含有一个 「[Content_Types].xml」 文件和 「_rels、docProps、word」 三个子目录。

    • [Content_Types].xml:该文件用于定义里面每一个 XML 文件的内容类型;

    • _rels:该目录下一般会有一个 「.rels」 后缀的文件,它里面保存了这个目录下各个 Part 之间的关系。_rels 目录不止一个,它实际上是有层级的。

    • docProps:该目录下的 XML 文件用于保存 docx 文件的属性;

    • word:该目录下包含了 Word 文档中的内容、字体、样式或主题等信息。

    介绍完 Word 支持的文件格式和 Docx 文档,我们开始进入正题 —— 「“在前端如何玩转 Word 文档”」

    二、Word 文档转换成 HTML 文档

    在日常工作中,有些时候我们希望在富文本编辑器中导入已有的 Word 文档进行二次加工,要满足这个需求,我们就需要先把 Word 文档转换成 HTML 文档。要实现这个功能,有 「服务端转换和前端转换」 两种方案:

    • 服务端转换:对于 Java 开发者来说,可以直接基于 POI 项目,POI 是 Apache 的一个开源项目,它的初衷是处理基于 Office Open XML 标准(OOXML)和 Microsoft OLE 2 复合文档格式(OLE2)的各种文件格式的文档,而且支持读写操作。

    • 前端转换:对于前端开发者来说,要想在前端解析 Word 文档,我们首先需要对 Word 文档进行解压,然后再进一步解析解压后的 XML 文档。看起来整个功能实现起来比较繁琐,但值得庆幸的是 Mammoth.js 这个库已经为我们实现上述功能。

    在介绍如何利用 Mammoth.js 把之前创建的 Word 文档转换成 HTML 文档前,我们来提前体验一下最终的转换效果。

    2.1 Mammoth.js 简介

    Mammoth.js 旨在转换 .docx 文档(例如由 Microsoft Word 创建的文档),并将其转换为 HTML。「Mammoth 的目标是通过使用文档中的语义信息并忽略其他细节来生成简单干净的 HTML。」 比如,Mammoth 会将应用标题 1 样式的任何段落转换为 h1 元素,而不是尝试完全复制标题的样式(字体,文本大小,颜色等)。

    由于 .docx 使用的结构与 HTML 的结构之间存在很大的不匹配,这意味着对于较复杂的文档而言,这种转换不太可能是完美的。但如果你仅使用样式在语义上标记文档,则 Mammoth 能实现较好的转换效果。

    当前 Mammoth 支持以下主要特性:

    • Headings

    • Lists,Table

    • Images

    • Bold, italics, underlines, strikethrough, superscript and subscript

    • Links,Line breaks

    • Footnotes and endnotes

    它还支持自定义映射规则。例如,你可以通过提供适当的样式映射将 WarningHeading 转换为 h1.warning。另外文本框的内容被视为单独的段落,出现在包含文本框的段落之后。

    Mammoth.js 这个库为我们提供了很多方法,这里我们来介绍三个比较常用的 API:

    • mammoth.convertToHtml(input, options):把源文档转换为 HTML 文档

    • mammoth.convertToMarkdown(input, options):把源文档转换为 Markdown 文档。这个方法与 convertToHtml 方法类似,区别就是返回的 result 对象的 value 属性是 Markdown 而不是 HTML。

    • mammoth.extractRawText(input):提取文档的原始文本。这将忽略文档中的所有格式。每个段落后跟两个换行符。

    介绍完 Mammoth.js 相关的特性和 API,接下来我们开始进入实战环节。

    2.2 Mammoth.js 实战

    Mammoth.js 这个库同时支持 Node.js 和浏览器两个平台,在浏览器端 mammoth.convertToHtml 方法的 input 参数的格式是 {arrayBuffer: arrayBuffer},其中 arrayBuffer 就是 .docx 文件的内容。在前端我们可以通过 FileReader API  来读取文件的内容,此外该接口也提供了 readAsArrayBuffer 方法,用于读取指定的 Blob 中的内容,一旦读取完成,result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。下面我们定义一个 readFileInputEventAsArrayBuffer 方法:

    export function readFileInputEventAsArrayBuffer(event, callback) {
      const file = event.target.files[0];
    
      const reader = new FileReader();
    
      reader.onload = function(loadEvent: Event) {
        const arrayBuffer = loadEvent.target["result"];
        callback(arrayBuffer);
      };
    
      reader.readAsArrayBuffer(file);
    }
    

    该方法用于实现把输入的 File 对象转换为 ArrayBuffer 对象。在获取 Word 文档对应的 ArrayBuffer 对象之后,就可以调用 convertToHtml 方法,把 Word 文档内容转换为 HTML 文档。

    mammoth.convertToHtml({ arrayBuffer })
    

    此时如果你的文档中不包括特殊的图片类型,比如 wmfemf 类型,而是常见的 jpgpng 等类型的话,那么你可以看到 Word 文档中的图片。难道这样就搞定了,那是不是太简单了,其实这只是个开始。当你通过浏览器的开发者工具审查 Word 解析后的 HTML 文档后,会发现图片都以 Base64 的格式进行嵌入。如果图片不多且单张图片也不会太大的话,那这种方案是可以考虑的。

    针对多图或大图的情况,一种比较好的方案是把图片提交到文件资源服务器上。在 Mammoth.js 中要实现上述的功能,可以使用 「convertImage」 配置选项来自定义图片处理器。具体的使用示例如下:

    let options = {
        convertImage: mammoth.images.imgElement(function(image) {
          return image.read("base64").then(function(imageBuffer) {
            return {
              src: "data:" + image.contentType + ";base64," + imageBuffer
            };
          });
        })
    };
    

    以上示例实现的功能就是把 Word 中的图片进行 Base64 编码,然后转成 Data URL 的形式,以实现图片的显示。很明显这不符合我们的要求,所以我们需要做以下调整:

    const mammothOptions = {
      convertImage: mammoth.images.imgElement(function(image) {
        return image.read("base64").then(async (imageBuffer) => {
          const result = await uploadBase64Image(imageBuffer, image.contentType);
          return {
            src: result.data.path // 获取图片线上的URL地址
          };
        });
      })
    };
    

    顾名思义 uploadBase64Image 方法的作用就是上传 Base64 编码后的图片:

    async function uploadBase64Image(base64Image, mime) {
      const formData = new FormData();
      formData.append("file", base64ToBlob(base64Image, mime));
      
      return await axios({
        method: "post",
        url: "http://localhost:3000/uploadfile", // 本地图片上传的API地址
        data: formData,
        config: { headers: { "Content-Type": "multipart/form-data" } }
      });
    }
    

    为了减少图片文件的大小,我们需要把 Base64 格式的图片先转成 Blob 对象,然后在通过创建 FormData 对象进行提交。base64ToBlob 方法的定义如下:

    function base64ToBlob(base64, mimeType) {
      let bytes = window.atob(base64);
      let ab = new ArrayBuffer(bytes.length);
      let ia = new Uint8Array(ab);
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      return new Blob([ia], { type: mimeType });
    }
    

    这时把 Word 文档转换为 HTML 并自动把 Word 文档中的图片上传至文件资源服务器的基本功能已经实现了。对于 Mammoth.js 内部是如何解析 Word 中的 XML 文件,我们就不做介绍了,反之我们来简单介绍一下 Mammoth.js 内部依赖的 JSZip 这个库。

    2.3 JSZip 简介

    JSZip 是一个用于创建、读取和编辑 「.zip」 文件的 JavaScript 库,含有可爱而简单的 API。该库的兼容性如下所示:

    OperaFirefoxSafariChromeInternet ExplorerNode.js
    YesYesYesYesYesYes
    经过最新版本的测试经过 3.0/3.6/最新版本测试经过最新版本的测试经过最新版本的测试经过 IE 6 / 7 / 8 / 9 / 10 测试经过 Node.js 0.10 / 最新版本测试

    2.3.1 JSZip 安装

    使用 JSZip 时,你可以通过以下几种方式进行安装:

    • 「npm」npm install jszip

    • 「bower」bower install Stuk/jszip

    • 「component」component install Stuk/jszip

    • 「手动」:先下载  JSZip 安装包,然后引入 dist/jszip.js 或  dist/jszip.min.js 文件

    2.3.2 JSZip 使用示例
    let zip = new JSZip();
    zip.file("Hello.txt", "Hello Semlinker\n");
    
    let img = zip.folder("images");
    img.file("smile.gif", imgData, {base64: true});
    zip.generateAsync({type: "blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "example.zip");
    });
    

    该示例来自 JSZip 官网,成功运行之后,会自动下载并保存 「example.zip」 文件。该文件解压后的目录结构如下所示:

    三、Word 文档转换成 Markdown 文档

    「Markdown 是一种轻量级标记语言」 ,创始人为约翰·格鲁伯(英语:John Gruber)。它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者 HTML)文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

    由于 Markdown 的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,目前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。

    了解完 Markdown 是什么之后,我们来分析一下如何把 Word 文档转换成 Markdown 文档。对于这个功能,我们也有两种处理方式:

    • 第一种:使用 Mammoth.js 这个库提供的 mammoth.convertToMarkdown(input, options) 方法;

    • 第二种:基于 mammoth.convertToHtml(input, options) 生成的 HTML 文档,在利用 HTML to Markdown 的转换工具,来间接实现上述功能。

    下面我们来介绍第二种方案,这里我们使用 Github 上一个开源的转换器 ——  turndown,它是使用 JavaScript 开发的 HTML to Markdown 转换器,使用起来很简单。

    首先你可以通过以下两种方式来安装它:

    • npm:npm install turndown

    • script:<script src="https://unpkg.com/turndown/dist/turndown.js"></script>

    安装完之后,你就可以通过调用 TurndownService 构造函数,来创建 turndownService 实例,然后调用该实例的 turndown() 方法执行转换操作:

    let markdown = turndownService.turndown(
      document.getElementById('content')
    )
    

    对于前面使用的 「abao.docx」 文档,最终转换生成的 Markdown 文档如下:

    全栈修仙之路,聚焦全栈,专注分享 TypeScript、Web API、Node.js、Deno 等全栈干货。
    
    ![](https://cdn.xxx.com/rich_159444942843202)
    

    需要注意的是,TurndownService 构造函数支持很多配置项,这里阿宝哥就不详细介绍了。感兴趣的小伙伴,可以自行阅读 turndown 官方文档或访问 turndown 在线示例 实际体验一下。

    既然已经讲到 Markdown,阿宝哥再给小伙伴们介绍一个 Github 上不错的开源库 markmap,该库使用思维导图的方式来实现 Markdown 文档的可视化,整体效果还蛮不错的:

    (图片来源:https://markmap.js.org/repl/)

    最后,我们再来看一下在前端如何动态生成 Word 文档。

    四、前端动态生成 Word 文档

    在前端如果要动态生成 Word 文档,我们可以直接利用一些成熟的第三方开源库,比如:docx 或 html-docx-js。

    下面我们将以 docx 为例,来介绍如何在前端如何生成 「.docx」 格式的 Word 文档。Docx 这个库提供了优雅的声明式 API,让我们可以使用 JS/TS 轻松生成 .docx 文件。此外,它还同时支持 Node.js 和浏览器。

    Docx 这个库为开发者提供了许多类,用于创建 Word 中的对应元素,这里我们简单介绍几个常见的类:

    • Document:用于创建新的 Word 文档;

    • Paragraph:用于创建新的段落;

    • TextRun:用于创建文本,支持设置加粗、斜体和下划线样式;

    • Tables:用于创建表格,支持设置表格每一行和每个表格单元的内容。

    接下来阿宝哥将使用 Docx 这个库,来动态生成前面介绍过的 「abao.docx」 文档,具体代码如下所示:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
      </head>
      <body>
        <h1>阿宝哥 - 动态生成 Word 文档示例</h1>
    
        <button type="button" onclick="generate()">
          点击生成 Docx 文档
        </button>
        <script src="https://unpkg.com/docx@5.0.2/build/index.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
        <script>
          async function generate() {
            const doc = new docx.Document();
    
            const imageBuffer = await fetch(
              "https://avatars3.githubusercontent.com/u/4220799"
            ).then((response) => response.arrayBuffer());
    
            const image = docx.Media.addImage(doc, imageBuffer, 230, 230);
    
            doc.addSection({
              properties: {},
              children: [
                new docx.Paragraph({
                  children: [
                    new docx.TextRun({
                      text: "全栈修仙之路,",
                      bold: true,
                    }),
                    new docx.TextRun({
                      text:
                        "聚焦全栈,专注分享 TypeScript、Web API、Node.js、Deno 等全栈干货。",
                    }),
                  ],
                }),
                new docx.Paragraph(image),
              ],
            });
    
            docx.Packer.toBlob(doc).then((blob) => {
              console.log(blob);
              saveAs(blob, "abao.docx");
              console.log("文档生成成功");
            });
          }
        </script>
      </body>
    </html>
    

    在以上示例中,当用户点击 「点击生成 Docx 文档」 按钮之后,会调用 generate() 回调函数。在该回调函数内,首先会创建新的 Document 对象,然后使用 fetch API 从 Github 上下载阿宝哥的头像,当成功获取图片的数据之后,会继续调用 docx.Media.addImage() 方法添加图片。

    接着我们会调用 doc.addSection() 方法来添加 Section 块,该块将作为段落的容器。在示例中,我们创建的 Section 块包含两个段落,一个用于存放文本信息,而另一个用于存放图片信息。最后我们会把 Document 对象转换成 Blob 对象,然后通过 saveAs() 方法下载到本地。

    五、参考资源

    • MDN - FileReader

    • 百度百科 - Microsoft Office Word

    • office-file-format-reference

    • Github - mammoth.js

    关于奇舞周刊

    《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后,直接发送链接到后台即可给我们投稿。

    展开全文
  • Java使用Freemarker生成各类型Word文档大合集 前言-Freemarker简单介绍 近期项目工作中需要编写大量格式相同但数据不同的Word文档,需要实现自动生成文档的效果,但是通过网上冲浪和官方文档搜索,相对来说,没有...
  • PDM导出Html Word文档

    2019-07-04 10:39:37
    PDM导出WORD文档 第一步,点击Report Temlates 制作模板 第二步,时间问题,我们在PATH小图标中 ,选择我们已经做好的一个FDATemplate 模板,并双击,没有模版的朋友,点New图标 这时候,我们左右2个区...
  • 一个同事的文档在U盘上处理并保存,然后早日去上班时发现文件打开内容是空的,但是文件的大小却是不为0的,通过各种办法最后分析出文件却是损坏无法恢复,最开始想的是编码问题,试了很多编码都不行,最后想在十六...
  • SpringBoot借助FreeMarker通过word模板生成.docx文件快速入门,推荐博客文章 java代码完全参考以上那篇文档足以,需求就是word模板中只插入文字,不插入...解答:在写word文档时,直接写你要替换的通用字符串,不要把
  • 4、选择对应的数据库类型 5、按照下图的顺序填写相关信息,注意一定要选择编码,不然导出的文档中文很有可能会乱码。 6、打开DBExportDoc V1.0 For MySQL-m.doc文件,如果你的word文档安装了宏插件的话将会弹出下图...
  • JAVA将ftl模板转word文档超详细步骤

    千次阅读 2020-02-27 14:07:19
    一:首先要创建一个word文档模板,将文档另存为xml格式保存,再把xml格式文件修改后缀为ftl文件。 word文档模板: 转ftl文件:直接将xml文件重命名 二:java后台主要代码 import freemarker.template....
  • 根据模板生成word文档下载

    千次阅读 2017-07-04 10:36:38
    需求:根据数据库已有字段,填入写好的word并下载 工具 :freemark 一种方便生成word的引擎,内置好大量基础方法 思路: 一.将数据库数据按需求(根据id,根据name......)提取存储在一个map中待用 二.将模板word生成ftl文件...
  • SpringMVC中使用FreeMarker生成Word文档

    万次阅读 2017-02-03 17:02:49
    这实例主要是完成使用FreeMarker在SpringMVC框架中生成word文档下载。 1、实例是maven工程,工程对jar包的依赖,pom.xml中主要的依赖是对springMVC和freemarker的包依赖: < properties > <!-- spring...
  • WORD格式 学生实验报告 院别电子工程学院课程名称信息论与编码 班级实验名称实验四哈夫曼编码 姓名实验时间 学号指导教师 成绩 报告内容 一实验目的和任务 1理解信源编码的意义 2熟悉 MATLAB程序设计 3掌握哈夫曼...
  • word设置多级目录

    千次阅读 2020-07-12 00:00:19
     作为一个优秀的程序员,日常的工作除了编码开发和测试之外,还有一项无法避免的,而且也占据巨大的工作量的内容就是文档的编制,因为 一个软件或者产品的质量,不是开发出来的,而是管理出来的 而管理的内容,不...
  • Chapter 2 传统加密技术;本章要点;基本概念;密钥短语密码就是选一个英文短语作为密钥字(Key Word)或密钥短语(Key Phrase)如HAPPY...栅栏技术按对角线的顺序写出明文以行的顺序读出作为密文;带密钥的置换技术;置换操作中
  • EasyPoi word导出教程

    千次阅读 2021-03-30 16:58:36
    负责这个需求后,我查阅CSDN,虽然也找到了一些文章,依据文章中的顺序,写出了demo。但demo毕竟是demo,在项目实战中,还是让我遇到不少坑。 由于 easypoi对Word的支持不太友好,不支持多图片导出,因此研究之后,...
  • Word表格怎么算名次

    千次阅读 2021-07-11 01:06:24
    Word文档中计算平均值虽然不像在Excel中那样直接输入比较方便、快捷,但是在Word同样提供公式的支持,只要了解在Word预定义好的公式或函数,是可以便捷操作进行计算的。 1 回答 2021-06-04 浏览:4 分类:办公入门...
  • SQLite 文档存储攻略

    千次阅读 热门讨论 2020-12-02 15:01:45
    本文介绍了 SQLite 中的文档存储功能。我们可以借助于 json1 扩展插件提供的 JSON 函数实现文档数据的存储以及 JSON 文档和 SQL 数据的相互转换,同时还可以利用 SQLite 表达式索引和生成列为 JSON 数据提供索引支持...
  • Word2Vec原理简单解析

    千次阅读 2022-03-27 13:05:52
    假设词典的长度为 N 即包含 N 个词语,并按照顺序依次排列。One-Hot 编码将词语表示成长度为 N 的向量,每一向量分量代表词典中的一个词语,则 One-Hot 编码的词语向量只有一位分量值为 1。假设词语在词典中的位置为...
  • 公司前一段时间做的一个项目中应用到了这个技术,需要后台获取数据后在前台直接下载word文档,利用freemarker模版生成的doc文档在电脑上可以正常打开,但是发送到手机上打开则全部变成“乱码”。但实际上并不是乱码...
  • 笔者寄语:2013年末,Google发布的 word2vec工具引起了一帮人的热捧,大家几乎都认为它是深度学习在自然语言领域的...但是doc2vec不仅考虑了单词上下文的语义,还考虑了单词在段落中的顺序。 ———————————
  • java动态生成word以及下载到本地或者浏览器下载我选择的是freemakerword操作具体代码ftl文件结构 我选择的是freemaker 首先看一下图: 经过多重查找和对比,最终选择了xml这种模板形式。其实可能poi大家会更熟悉一些,...
  • 一般的方法都是用插入分隔符的方法把文档分为二节,断开节间的链接,再分别设置页码即可。就如上面的朋友回答中说的一样。会的话是很方便的。所以还是推荐使用这种方法。为了交流,我这里说一下用IF域的高级页码设置...
  • word2016公式根据章节自动编号、对齐、引用

    万次阅读 多人点赞 2018-04-14 16:11:34
    点击工具栏中“插入”下面的文档部件: 点击将“所选内容保存到文章部件库”,点击确定。 将光标移至第二个公式后,点击“插入”----“文档部件”----点击编号(下图中两个框的任意一个) 重复此步骤,可以给公式2、...
  • python-docx获取word的自动编号

    千次阅读 2021-12-02 17:00:05
    利用python-docx获取word文档中的自动编号
  • 转至...  最近项目中有一个这样的需求:导出word 文档,要求这个文档的格式不是固定的,用户可以随便的调整,导出内容中的数据表格列是动态的,例如要求
  • DL4J中文文档/语言处理/Word2Vec

    千次阅读 2018-11-01 18:54:41
    Word2Vec, Doc2vec &amp; GloVe: 用于自然语言处理的神经词嵌入 内容 介绍 神经词嵌入 有趣的Word2Vec结果  给我代码 Word2Vec 剖析 安装,加载与训练 代码示例 问题排查与Word2Vec调试 Word2Vec用例...
  • 如何写好一份软件开发设计文档

    千次阅读 2021-10-21 16:06:06
    设计文档- 也被称作技术规范和实现手册,描述了你如何去解决一个问题,是确保正确完成工作最有用的工具,其目的是迫使你对设计展开缜密的思考,并收集他人的反馈,进而完善你的想法,同时在软件交付和交接的过程中,...
  • 需求文档

    千次阅读 多人点赞 2019-03-29 18:10:18
    产品需求文档的表现形式有很多种,常见的有Word、图片和交互原型这三种形式,文档内容通常包含信息结构图、界面线框图、功能流程图、功能说明文档。虽然产品需求文档没有标准的规范,但是有两项是必不可少的,那就是...
  • 博主在网上看其他博主的导出word文档教程后自己尝试导出时发现除了很多问题,在此贴出自己导出成功的操作步骤,如果有什么讲不清楚的望谅解, 一.所需jar包,freemarker-2.3.20.jar;  因为我实在没有找到在哪里...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,633
精华内容 11,053
关键字:

word文档顺序编码