js 导出word 文档 doc docx

在做项目时，要将富文本编辑器，或是html内容导出为word。

先引入文件保存js

<script src="FileSaver.js"></script>

导出为Docx

docx体积更小，而且word2007也可以打开

1.引用插件html-docx.js

<script src="html-docx.js"></script>

2.构建完整的html内容文档

var content = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head>'+ 要导出的html信息 +'</html>'

content要导出的html信息，建议在服务端自己拼接完成。

若是想从页面抓取html信息，可以用下面的方法（不建议，客户端消耗高）

html:

<div id="content">要导出的html信息<img src="xxx">
</div>


function convertImagesToBase64 (content) {var regularImages = content.querySelectorAll("img");var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');[].forEach.call(regularImages, function (imgElement) {// preparing canvas for drawingctx.clearRect(0, 0, canvas.width, canvas.height);canvas.width = imgElement.width;canvas.height = imgElement.height;ctx.drawImage(imgElement, 0, 0);// by default toDataURL() produces png image, but you can also export to jpeg// checkout function's documentation for more detailsvar dataURL = canvas.toDataURL();imgElement.setAttribute('src', dataURL);})canvas.remove();}
var content = document.getElementById('#content');
convertImagesToBase64(content);//转换图片为base64content = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head>'+ content +'</html>'

3.利用脚本导出word

 var converted = htmlDocx.asBlob(content);saveAs(converted, 'test.docx');// 用 FielSaver.js里的保存方法 进行输出

导出为Doc

利用wordjquery 这个

1.引入jquery和wordexport

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="wordexport.js"></script>

2.使用导出

$(元素).wordExport(文件名,isBase64)

isBase64 用于标识元素中的图片是否都处理为了base64，默认为false,内置处理方法，可以去看看

注意

无论是html-docx.js还是 wordexport.js 都需要将html中的图片转为base64形式

而且，图片的宽度高，最好自己设置下，否则下载的图片会以图片原始大小下载，就会出现以下，图片在文档超出情况

处理图片的宽高，可以采用正则替换，这里给出两种替换参考（平时不太写正则，所以有点挫）

C#:

string reg = "<img.*? src=[\"'](.*?)['\"].*?>";
MatchCollection collections = Regex.Matches(description, reg);
if (collections.Count > 0)
{foreach (Match match in collections){Regex regWidth = new Regex("width\\s*=\\s*\\S+ ");if (!regWidth.IsMatch(img))//img 中不存在width {//获取其他属性进行替换Regex reg1 = new Regex(@"style\s*=(['""\s]?)[^'""]*?\1"); ;img = reg1.Replace(img, "width=\"350\" height=\"216\" ");//按黄金比例替换}else{Match mathWidth = regWidth.Match(img);if (mathWidth.Success){string widh = mathWidth.Value.Substring(7).Substring(0, mathWidth.Value.Substring(7).Length - 2);//widthif (int.Parse(widh) > 400) {//原宽超出400Regex regHeight = new Regex(@"height\s*=(['""\s]?)[^'""]*?\1");Match mathHeight = regHeight.Match(img);if (mathHeight.Success){string height = mathHeight.Value.Substring(8).Substring(0, mathHeight.Value.Substring(8).Length - 1);img = regHeight.Replace(img, "height=\" " + 350 * int.Parse(height) / int.Parse(widh) + "\"");//按比例替换 高}img = regWidth.Replace(img, "width=\"350\"");}}}}
}

若是二进制流存储的图片数据，可以通过Bitmp来读取原始大小，然后按照原始比例再进行缩放

//通过二进制流 获取图片原始宽高
private int[] GetScaleImgSizeByByte(byte[] image)
{MemoryStream stream = new MemoryStream(image);//内存流写入Bitmap bmp = new Bitmap(stream);int width = 600;//先指定一个固定大小 和word页面边距最大宽差不多int height = 600;if (bmp.Width > 600){height = (int)(width * ((double)bmp.Height / (double)bmp.Width));}if (height > 600 || bmp.Height > 600){//调完宽后判断高 height = 600;width = (int)(height / ((double)bmp.Height / (double)bmp.Width));}return new int[] { width, height };
}

js正则替换：

 var str = htmlText.replace(/(<img[^>]*)(\/?>)/gi, function (match, capture) {if(match.match(/width\s*?=\s*?([‘"])[\s\S]*?\1/ig)==null)match = match.replace(/(<img[^>]*)(\/?>)/gi,"$1 width='350' $2")//没有宽就增加宽return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '').replace(/width\s*?=\s*?([‘"])[\s\S]*?\1/ig ,"width='350'");
});

js 导出word 文档 doc docx相关推荐

SpringBoot 导出Word文档(doc\docx) Office无法打开，WPS正常等坑
以下对于生成doc文档来说哒, 对于生成docx请移步https://blog.csdn.net/wantLight/article/details/106105416 首先引入freemarker依 ...
使用jquery.wordexport.js导出word文档设置行间距不生效问题
在使用jquery.wordexport.js导出word文档时在js里设置的style margin-top不生效生成的doc还是没有行间距一通百度后发现没用解决方法后来发现有位 ...
js导出word文档可以兼容IE8+浏览器适配其他浏览器
js导出word文档,兼容IE8浏览器其他浏览器需要引入两个文件:FileSaver.js 和 jqueryWordExport.js 需要兼容IE8浏览器需要引用:FileSaver.js exc ...
Word处理控件Aspose.Words功能演示：使用 C++ 创建 MS Word 文档 (DOC/DOCX)
Aspose.Words 是一种高级Word文档处理API,用于执行各种文档管理和操作任务.API支持生成,修改,转换,呈现和打印文档,而无需在跨平台应用程序中直接使用Microsoft Word.此 ...
导出word文档生成docx格式添加水印
为了导出docx格式看了等多文档,最后做个总结依赖包用到dom4j和freemarker,最为方便. <!-- https://mvnrepository.com/artifact/freema ...
js 导出word文档
通过基于 jquery 下的文件 jquery.wordexport.js + 插件 file-saver 生成 word 文档.部分优化在代码的注释中. 在index.html引入jquery,版本 ...
vue项目+element表格前端使用纯js导出word文档
详细请读https://www.jianshu.com/p/0de31429b12a这篇文章首先安装各种工具: -- 安装 docxtemplater cnpm install docxtempla ...
vue前端html页面导出word文件,Vue-纯前端导出word文档
在项目中,我们可以借助后端返回文件流实现文件下载.如果前端有数据,也可以借助前端框架进行下载.本文将介绍如何在前端纯js实现word文档导出. 1. 组件介绍要实现前端纯js导出word文档,我们需 ...
如何导出word文档
前言一般导出word,是后台做的功能,如果确实需要前端做,可以借助jQuery的wordexport.js导出word文档提示:以下是本篇文章正文内容,下面案例可供参考一.使用步骤 1.引入文件 ...

js 导出word 文档 doc docx

导出为Docx

导出为Doc

注意

js 导出word 文档 doc docx相关推荐

最新文章

热门文章