纯前端导出word文档

实现这个功能时参考了两处文档，但是都有兼容性问题一个是不兼容ie,一个是只能在ie中使用，不过正好互补了，下面是结合两处文档之后的。（摘自想要飞翔的小猪和iteye_10362的博客。）
注意：ActiveXObject是ie特有的，在其他浏览器上会报错，也可根据ActiveXObject对象判断当前是否为ie浏览器。 $("#test2").wordExport(“客户评价”);是非ie的方法，需要用到jquery,FileSave和jquery.wordexport.js.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="./jquery-2.0.0.js"></script><script src="./FileSaver.js"></script><script src="./jquery.wordexport.js"></script><!-- 这三个文件在非ie浏览器下用到 -->
</head>
<body><html><HEAD><title>WEB页面导出为Word文档后分页的方法 </title></HEAD><body><BR><div id="test"><h2>hahha</h2>^bbb^ccc</div><div id="test2"><h2>hahha</h2>bbbccc</div><input id="btn" type="button" value="导出页面指定区域内容到Word"/></body><script>/**//** * @param {Object} cont  要导出的html元素内容的id,注意不要加双引号* @param {Object} key   分页关键字*/function AllAreaWord(cont,key){var oWD = new ActiveXObject("Word.Application");//默认为页面视图var oDC = oWD.Documents.Add("", 0, 0);var oRange = oDC.Range(0, 1);//var oRange1 = oDC.Range(0,2);var sel = document.body.createTextRange();//参数为html元素id sel.moveToElementText(cont);sel.select();sel.execCommand("Copy");oRange.Paste();oWD.Application.Visible = true;//得到打开后word的selection对象var selection = oWD.Selection;//设置字体大小selection.Font.Size = 10;//ctrl+A 全选操作selection.WholeStory();//清除格式selection.Find.ClearFormatting();//指定查找关键字selection.Find.Text = key;//^m为手动分页符标记//向下查找selection.Find.Forward = true;selection.Find.Wrap = 1;//不区分大小写selection.Find.MatchCase = false;//不匹配整个单词selection.Find.MatchWholeWord = false;//如果找到指定字符串返回真,否则返回falsewhile (selection.Find.Execute()) {//插入分页符,分页符常量为7,具体可查word apiselection.InsertBreak(7);}}var btn = document.getElementById('btn')if (!!window.ActiveXObject || "ActiveXObject" in window){btn.onclick = function(){AllAreaWord(document.getElementById('test'),'^')}}else{btn.onclick = function(){$("#test2").wordExport("客户评价");}}</script>
</html>
</body>
</html>

纯前端导出word文档相关推荐

vue前端html页面导出word文件,Vue-纯前端导出word文档
在项目中,我们可以借助后端返回文件流实现文件下载.如果前端有数据,也可以借助前端框架进行下载.本文将介绍如何在前端纯js实现word文档导出. 1. 组件介绍要实现前端纯js导出word文档,我们需 ...
vue项目+element表格前端使用纯js导出word文档
详细请读https://www.jianshu.com/p/0de31429b12a这篇文章首先安装各种工具: -- 安装 docxtemplater cnpm install docxtempla ...
Vue-纯前端导出word文档 Can‘t find end of central directory:is this a zip file？
其实好多文章都有介绍我这里就把自己遇到的一个奇葩问题记录一下: 归根结底就是不要直接通过改变文件后缀名来企图创建一个word.docx文件: 首先 -- 安装 docxtemplater npm i ...
纯前端导出word、pdf、excel、txt、svg文档方法与技巧（附带问题总结）
文章目录导出pdf **实现思路:** **问题总结:** **具体代码** **封装好的导出函数,记得引入js插件** 封装方法一: 封装方法二: 封装方法三: 纯前端导出word文档方法与技巧 ...
vue element ui 利用xslx导出文档表格功能（纯前端导出下载文档）
目录前言步骤: 1.下载xslx 2.导入xslx 3.template中给个点击事件 4.methods中定义函数实现导出前言本篇文章记录纯前端导出下载文档功能. 若想查看从后端接收文件流, ...
vue 生产word_nodejs(officegen)+vue(axios)在客户端导出word文档
前言我的项目中有一个需求:点击按钮生成可编辑的word文档订单详情的信息我使用的前端框架是Vue.js.后台使用的是node.js node.js生成和导出word文档我参考的是下面这两篇文章,写 ...
利用docx4j完美导出word文档（标签替换、插入图片、生成表格）
最近公司让我实现一个利用原有word模板,导出word文档的功能模块,发现docx4j是个很不错的工具,但是之前从来没有用过,对此并不了解,于是上网查找相关资料,也是非常少之,于是便自己开始摸索. 1 ...
【Java实现导出Word文档功能 XDocReport +FreeMarker】
Java实现导出Word文档功能(XDocReport +FreeMarker) 前言在日常的开发工作中,我们时常会遇到导出Word文档报表的需求,比如公司的财务报表.医院的患者统计报表.电商平台的 ...
如何导出word文档
前言一般导出word,是后台做的功能,如果确实需要前端做,可以借助jQuery的wordexport.js导出word文档提示:以下是本篇文章正文内容,下面案例可供参考一.使用步骤 1.引入文件 ...

纯前端导出word文档

纯前端导出word文档相关推荐

最新文章

热门文章