由于工作需要,将一个页面导出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)
// };
}

js jquery jquery.wordexport.js 实现导出word的更多相关文章

  1. JQuery合并列(可用于导出Word)

    在网上找了一些JQuery合并列的例子,但是都是用.hide()的方式,这样导致了在导出Word的时候表格严重变形 自己写了一个用.remove()方式的合并列 function arrangeTab ...

  2. jQuery wordexport导出 word

    同事给我说了简单的导出word的插件,亲测了下,做个随笔. 这个导出插件是jQuery自带的的插件,通过调用wordexport.js来实现导出功能. 1.引入的js <script type= ...

  3. C# 导出word文档及批量导出word文档(4)

          接下来是批量导出word文档和批量打印word文件,批量导出word文档和批量打印word文件的思路差不多,只是批量打印不用打包压缩文件,而是把所有文件合成一个word,然后通过js来调用 ...

  4. 使用 jquery.wordexport.js导出的Word排版

    js导出word文档所需要的两个插件: FileSaver.js jquery.wordexport.js 使用jquery.wordexport.js这个插件导出的word文档的排版方式: 编辑器打 ...

  5. jquery插件导出word:jquery.wordexport.js

    前言 今天项目中遇到一个需求把我们系统中的统计数据导出来(主要是表格).其实实现的的方法有很多,而此次针对我的系统第一获取数据有点慢,加上前不久写了一个在线阅读pdf,故此这次也想用前端的方式来导出. ...

  6. jquery.wordexport.js打印echarts.js画出的柱状图

    jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...

  7. asp.net、mvc、ajax、js、jquery、sql、EF、linq、netadvantage第三方控件知识点笔记

    很简单,如下: 父页面:(弹出提示框) function newwindow(obj) { var rtn = window.showModalDialog('NewPage.htm','','sta ...

  8. 使用JS与jQuery实现文字逐渐出现特效

    该需求出现原因:想要实现一个在一开始加载页面时就出现一行文字逐渐出现的效果,且需要实现的是一种逐渐的过渡出现效果为不是一种生硬的突然间歇性出现.于是便开始尝试利用最近正在学习的jQuery技术和JS实 ...

  9. JQuery plugin ---- simplePagination.js API

    CSS Themes "light-theme" "dark-theme" "compact-theme" How To Use Step ...

随机推荐

  1. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  2. 你真的会使用SQL Server的备份还原功能吗?之二:主要备份类型

    假设在下面几个时间段中,一个数据库积累插入了如下数据: 1.完整数据库备份 故名思意,完整数据库备份包括完整的数据库信息.它包括数据库的数据文件和备份结尾的部份活动事务日志. 完整备份基本语法如下: ...

  3. 高效编程之cache命中对于程序性能的影响

    下面这个代码用两个双层循环遍历了一个二维数组里所有的元素,以我自己机器的测试 上面那个循环耗时基本为下面的一半,两个循环的时间复杂度相同,为什么会有这么大的差别? 首先要明白的是不管是几维数组,他们都 ...

  4. Linux用户空间与内核空间(理解高端内存)

    Linux 操作系统和驱动程序运行在内核空间,应用程序运行在用户空间,两者不能简单地使用指针传递数据,因为Linux使用的虚拟内存机制,用户空间的数据可能被换出,当内核空间使用用户空间指针时,对应的数 ...

  5. 快速排序算法-C语言实现

    注:本篇内容为翻译,之所以选择这篇进行翻译原因是该文章含有动画,能够更加直观地展示快速排序.同时,可以仔细看一下代码,代码中把结构化的思想给予了更加充分地表现.按照功能进行模块划分的思想得到了彻底地贯 ...

  6. win7+iss7的配置,以及如何在本地IIS服务器挂载一个网站

    虽然学过在XP安装IIs服务器和在IIS服务器挂载网站的东西,但是win7和XP的方式还是有许多不同的.废话不说直接进入正题 在本地安装IIS服务器 在IIS服务器中添加你的项目 将你项目的首页设置为 ...

  7. 疑难杂症:java.lang.AbstractMethodError: org.apache.xerces.dom.DocumentImpl.setXmlVersion(Ljava/lang/String;)V

    错误: java.lang.AbstractMethodError: org.apache.xerces.dom.DocumentImpl.setXmlVersion(Ljava/lang/Strin ...

  8. 关于apache的重启

    一:Apache重起的最好方法apachectl graceful http://blog.csdn.net/qianling3439/article/details/8622618 二:请问apac ...

  9. LeetCode42 Trapping Rain Water

    题目: Given n non-negative integers representing an elevation map where the width of each bar is 1, co ...

  10. LeetCode20 Valid Parentheses

    题意: Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the ...