Javascript实现导出word - jquery.wordexport.js 实现导出word

由于工作需要，将一个页面导出word文档，主要是简历！经过百度搜索之后，没找到结果，无奈之下只能求助Google，意外发现jquery一款插件可以实现这个功能！而且效果还算可以！

基本可以实现想要的功能！

首先需要的js文件如下，贴出github地址，大家自由下载！

https://github.com/eligrey/FileSaver.js/

https://github.com/markswindoll/jQuery-Word-Export

首先你要引入jquery 和FileSaver.js

<script src="http://jquery.min.js"></script>

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

一定先引入以上两文件之后再引入jquery.wordexport.js

<script src="jquery.wordexport.js"></script>

需要到处的内容这样命名,id名字自己随意，注意对应下方的jquery调用

<div id="page-content">Your content here</div>

使用方法，创建一个导出的按钮例如：

<a class="word-export" href="javascript:void(0)"> 导出 </a>

js代码如下

<script type="text/javascript">
jQuery(document).ready(function($) {
$("a.word-export").click(function(event) {
$("#page-content").wordExport();
});
});
</script>

希望对你有用

应用过程中可能会遇到报错，主要是因为图片导致的！

我是这样解决的，大概在36行左右，找到如下代码，按照下方演示注释，添加相应代码之后，应该就可以

for (var i = 0; i < img.length; i++) {

// Calculate dimensions of output image

var w = Math.min(img[i].width, options.maxWidth);

var h = img[i].height * (w / img[i].width);

// Create canvas for converting image to data URL

//这是添加的代码--------------------------------------------

var img_id = "#"+img[i].id;

$('<canvas>').attr("id", "test_word_img_" + i).width(w).height(h).insertAfter(img_id);

//-------------------------------------------------

//下面是注释的代码

// var canvas = document.createElement("CANVAS");

// canvas.width = w;

// canvas.height = h;

// // Draw image to canvas

// var context = canvas.getContext('2d');

// context.drawImage(img[i], 0, 0, w, h);

// // Get data URL encoding of image

// var uri = canvas.toDataURL("image/png");

// $(img[i]).attr("src", img[i].src);

// img[i].width = w;

// img[i].height = h;

// // Save encoded image to array

// images[i] = {

// type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")),

// encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")),

// location: $(img[i]).attr("src"),

// data: uri.substring(uri.indexOf(",") + 1)

// };

}

转载来源：https://www.cnblogs.com/itafter/p/4379988.html

Javascript实现导出word - jquery jquery.wordexport.js 实现导出word相关推荐

jquery.wordexport.js插件导出Word如何设置默认打开视图为页面视图(亲测有效)
1.打开jquery.wordexport.js 2.找到mhtml节点,原来的模式为:"Web版式视图" 把原来的内容替换如下: mhtml: {top: "Mime- ...
关于使用jquery.wordexport.js如何设置导入文档的页边距问题(超详细，亲测可用)
问题描述最近项目要求修改导出的word文档页边距.如下图所示: 原来使用wordexport.js默认导出的页边距是标准的,需求是将页边距改为窄. 解决的步骤一: 首先将页面直接导出,然后使用wor ...
使用jquery.wordexport.js导出word文档设置行间距不生效问题
在使用jquery.wordexport.js导出word文档时在js里设置的style margin-top不生效生成的doc还是没有行间距一通百度后发现没用解决方法后来发现有位 ...
使用 jquery.wordexport.js导出的Word排版
js导出word文档所需要的两个插件: FileSaver.js jquery.wordexport.js 使用jquery.wordexport.js这个插件导出的word文档的排版方式: 编辑器打 ...
前端使用jquery.wordexport.js导出word
先看导出效果是不是各位需要的里面包含的内容有:页眉.页脚显示,导出默认页面视图模式,页数显示,插入分页上代码 jquery.wordexport.js: if (typeof jQuery !== ...
HTML导出为word：jquery.exportWord.js
文章目录 HTML导出为word:jquery.exportWord.js 1.需求分析 2.解决方案 3.jquery.wordExport.js 3.1 引入js文件 3.2 基本使用 3.3 解 ...
wordexport.js导出word 分页符问题
在导出word之前插入以下js代码在需要增加分页符的div加上pages的class类名补充 page-break-before:always 在div之前插入分页符 page-break-aft ...
java与jquery的选择器区别_java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章 JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScr ...

Javascript实现导出word - jquery jquery.wordexport.js 实现导出word

Javascript实现导出word - jquery.wordexport.js 实现导出word

Javascript实现导出word - jquery jquery.wordexport.js 实现导出word相关推荐

最新文章

热门文章