使用js实现页面导出到word文档

最新推荐文章于 2024-04-09 11:37:50 发布
最新推荐文章于 2024-04-09 11:37:50 发布
阅读量5.8k 收藏 1
点赞数 1

使用js实现页面导出到word文档

以下是HTML代码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>HTML导出内容至WORD</title>

</head>

 

<body>

</body>

</html>

<head>

      <title>测试HTML导出内容至WORD</title>

    <script type="text/javascript" language="javascript">

      

          function exportToWord(controlId) {

              var control = document.getElementById(controlId);

              try {

                  var oWD = new ActiveXObject("Word.Application");

                  var oDC = oWD.Documents.Add("", 0, 1);

                   var oRange = oDC.Range(0, 1);

                   var sel = document.body.createTextRange();

                   try {

                       sel.moveToElementText(control);

                   } catch (notE) {

                       alert("导出数据失败，没有数据可以导出。");

                     window.close();

                      return;

                  }

                  sel.select();

                   sel.execCommand("Copy");

                   oRange.Paste();

                   oWD.Application.Visible = true;

                   //window.close();

               }

            catch (e) {

                 alert("导出数据失败，需要在客户机器安装Microsoft Office Word(不限版本)，将当前站点加入信任站点，允许在IE中运行ActiveX控件。");

                  try { oWD.Quit(); } catch (ex) { }

                   //window.close();

               }

          }

       </script>

  </head>

   <body>

      <div id="TestDiv">

          <div align="center">第三季度成绩表</div>

        

         <table width="100%">

              <tr>

                   <td style="background-color: #F50AE5; font-weight: bold;text-align:center">

                       名次

                 </td>

                  <td style="background-color: #F50AE5; font-weight: bold;text-align:center">

                      姓名

               </td>

                 <td style="background-color: #F50AE5; font-weight: bold;text-align:center">

                     总分

                 </td>

            </tr>

             <tr>

                   <td style="text-align:center">

                    1

                </td>

                <td style="text-align:center">

                      张三

               </td>

             <td style="text-align:center">

                     86

                   </td>

               </tr>

               <tr>

                   <td style="text-align:center">

                     2

                 </td>

                  <td style="text-align:center">

                      李四

                </td>

                   <td style="text-align:center">

                       85

                 </td>

             </tr>

          </table>

      </div>

      <div>

     <div style="text-align:center">

     <input type="button" value="导出到WORD" οnclick="return exportToWord('TestDiv')" />

      </div>

  </body>

  </html>

 

 

 

                                                                            

高傲的苹果
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS截取网页转PDF,导出为Word.
qq_42782011的博客
08-17 784
JS实现网页截取，并转成PDF文件导出
js 导出word文档
qq_40031303的博客
06-28 4001
通过基于 jquery 下的文件 jquery.wordexport.js + 插件 file-saver 生成 word 文档。部分优化在代码的注释中。 在index.html引入jquery，版本自定 index.html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 通过npm下载 插件 file-saver npm install file-s
JavaScript导出word文档简单易懂
最新发布
m0_56892470的博客
04-09 420
1.先下载安装依赖 在终端。
纯js实现html指定页面导出word
积善之家
09-19 1398
因为最近做了范文网站需要，所以要下载为word文档，如果php进行处理，很吃后台服务器，所以想用前端进行实现。查询github发现，确实有这方面的插件。学校班主任安全工作计划模板_醉学网 (nongpin88.com)这样就搞定了，看看效果吧！
js对页面进行动态编译以及生成导出word文件
hongsir的博客
01-19 1598
ace编译器 安装 npm install ace-builds --save-dev 引入并挂载 在main.js中 // 引入ace编辑器组件 import ace from 'ace-builds' Vue.use(ace) 使用 创建编辑器组件 <template> <div class="ace-container"> <div class="toolbar" @mousedown="toolbarDown" @mouseup="toolbarUp"&g.
使用watermark.js给HTML、Word、PPT、Excel等添加水印
YunWisdom
08-15 1万+
使用watermark.js给HTML、Word、PPT、Excel等添加水印 watermark.js是一个给B/S网站系统加一个很浅的水印插件，确保系统的保密性，安全性，降低数据泄密风险。 水印插件内容，包含1、版本，2、水印插件-使用，3、水印插件-testTool（测试工具），4、内置方法，5、支持各种属性配置使用，等等。 注意：基于本项目源码从事科研、论文、系统开发...
javascript将网页表格导出Word和Excel
热门推荐
小马的专栏
09-27 2万+
 javascript将网页表格导出Word function AllAreaWord() {  if(document.all("tab").rows.length==0)  {   alert("没有内容可导！");   return;  }  try{   var oWD = new ActiveXObject("Word.Application");   }catch(e)  {  
js将HTML文本导出生成word文档
11-27
总结，通过html2docx和FileSaver.js这两个JavaScript库，我们可以轻松地在前端实现将HTML内容导出为Word文档的功能。虽然这种方法有一定的局限性，但对于简单的HTML结构和样式，它已经足够满足大部分需求。对于更...
JavaScript将Web页面内容导出到Word及Excel的方法
10-24
在上述标题和描述中，我们关注的是如何利用JavaScript将Web页面内容导出到Microsoft的Word和Excel文档。 在JavaScript中，要实现这种功能，通常需要借助于ActiveXObject，这是一个仅在Internet Explorer浏览器中...
js实现导出文本和图片(images和canvas)到word文档
07-12
综上所述，实现“js实现导出文本和图片(images和canvas)到word文档”需要理解HTML与Word文档格式的转换，利用JavaScript库进行文件操作，处理文本和图片数据，并关注浏览器兼容性、性能优化以及用户交互设计。...
echart图表导出到word文档
07-19
poi 将echar报表生成到word中，通过base64格式把图表信息传到后台，后台自动生成word文档，当然可以根据模板自动填充数据，这个小案例只是根据自己需要生成文档，根据自定义模板再拼接自定义内容也有，需要的联系我...
利用js导出Web页面内容到Word、Excel
07-28
利用js在web页面即可实现导出Web页面内容到Word、Excel
JavaScript web转word文档
05-19
用JavaScript调用word写入内容
js导出Word默认页面视图、横向显示、分栏、设置固定页眉
08-14
js导出Word默认页面视图、横向显示、分栏、设置固定页眉
导出网页到word文档(原生JS版本)
09-22
导出网页到word文档(原生版本),亲测可用 import exportWord from 'js-export-word' const wrap = document.getElementById('test') const config = { addStyle:true, // 是否导出样式，默认为true，此操作会将...
通过前端方法实现水印加密
weixin_45731450的博客
05-22 926
为了防止信息泄露或知识产权被侵犯，在web的世界里，对于页面和图片等增加水印处理是十分有必要的，水印的添加根据环境可以分为两大类，前端浏览器环境添加和后端服务环境添加，简单对比一下这两种方式的特点： 前端浏览器加水印： 减轻服务端的压力，快速反应 安全系数较低，对于掌握一定前端知识的人来说可以通过各种骚操作跳过水印获取到源文件 适用场景：资源不跟某一个单独的用户绑定，而是一份资源，多个用户查看，需要在每一个用户查看的时候添加用户特有的水印，多用于某些机密文档或者展示机密信息的页面，水印的目的在于文档外流的
javascript对word文档进行页眉页脚套打
和你在一起的日子
11-14 764
[size=medium]word的套打，一般都是使用文本域，然后通过js脚本对文本域处理，插入对应的值。 word的页眉页脚貌似弄不了文本域，所以只能单独处理。 页眉页脚也是需要样式的，这个刚开始的时候有点走弯路了，啥靠左靠右空行之类的，搞到头疼。 下班公车上，无聊的望着窗外，脑袋里还想着如何实现，突然一个东西冒了出来，table，对，就是这个东西。[/size] [size=med...
jquery.wordexport.js导出word文件含图片
txf666的博客
11-26 6589
需要用的到插件jquery.worldexport.js导出world最主要的问题是：1.图片的导出。 2.源代码仅支持内联样式而页级css样式并不能生效。 3.复杂的dom样式以及效果如何导出。针对问题一，二的解决方案就是：修改jquery.wordexport的源码。让他支持页级Css生效以及图片src是http或者https链接的导出。修改之后的代码如下：第一个修改点就是传入style字符串集，对页级css样式的支持（似乎就是原作者还未TODO的项）。 第二个点就是对img的处理。注释掉对应的代码添加
通过js操作word的页眉页脚
jianhao84的专栏
09-05 1436
Insert title here         abc          abc          abc          abc      var wordApp=new ActiveXObject("Wo
vue2页面导出成word文档的实现方法不是导出pdf
05-31
非常抱歉，我理解错了。以下是Vue2页面导出成Word文档的实现方法： 1. 引入FileSaver.js、JSZip.js、html-docx-js库 安装： ``` npm install file-saver jszip html-docx-js --save ``` 引入： ```javascript import FileSaver from 'file-saver' import JSZip from 'jszip' import HtmlDocx from 'html-docx-js' ``` 2. 创建导出方法 ```javascript exportWord() { const content = document.querySelector('#content') // 获取需要导出的内容 const converted = HtmlDocx.asBlob(content.innerHTML) // 将HTML转换成Word文档 const fileName = 'example.docx' // 设置文件名 FileSaver.saveAs(converted, fileName) // 下载文件 } ``` 3. 在Vue2模板中绑定导出方法 ```vue <template> <div> <div id="content"> <!-- 需要导出的内容 --> </div> <button @click="exportWord">导出Word</button> </div> </template> ``` 注意：这种方法需要在HTML中定义样式，以保证导出的Word文档样式一致。同时，对于一些特殊的样式和排版，可能需要进行额外的处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值