将html指定内容转换成word文档并下载-CSDN博客

本文链接：https://blog.csdn.net/zym400/article/details/126846678

本文介绍了如何在前端使用JavaScript将HTML内容转换为Word文档并实现本地下载。首先，通过生成表格并填充数据，然后利用特定函数将这些内容转换成Word格式，并最终提供下载。所需的JavaScript库包括FileSaver.js和jquery.wordexport.js。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言

一、前端js文件引入路径

二、使用步骤

1.生成表格

2.往表格中添加数据

3.生成word文档并下载到本地函数

4.需要的js文档

总结

前言

写项目的时候需要将数据整理成表格的形式，并且将表格放在word文档里面，能下载到本地。

一、前端js文件引入路径

<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/FileSaver.js"></script>
<script type="text/javascript" src="js/jquery.wordexport.js"></script>

二、使用步骤

1.生成表格

生成内容放在一个div里，用id唯一标识，以后引用函数生成文件时，要使用这个id。

代码如下（示例）：

<div id="printFiled" style="display:none;">
    <span style="text-align: center"><h2>表1</h2></span>
    <br>
    <table id="table1" border="1" style="border-collapse: collapse">
        <tr>
            <th></th>
        </tr>
    </table>
    <br>

    <span style="text-align: center"><h2>表2</h2></span>
    <br>
    <table id="table2" border="1" style="border-collapse: collapse" >
        <th></th>
    </table>
    <br>

    <span style="text-align: center"><h2>表3</h2></span>
    <br>
    <table id="table3" border="1" style="border-collapse: collapse" >
        <th></th>
    </table>
</div>

2.往表格中添加数据

代码如下（示例）：

$("#table1").empty();
    var th="<tr><th></th><th></th><th></th></tr>";
    $("#table1").append(th);
    $.each(获得的数据,function (i,obj) {

        var tr =$("<tr>"+"</tr>");
        var td = $('<td style="text-align: center;vertical-align: middle;font-size: 16px;height: 30px;width:9%;border: 1px solid #000000">' + obj. + '</td>' +
            '<td style="text-align: center;vertical-align: middle;font-size: 16px;height: 30px;width:9%;border: 1px solid #000000">' + obj. + '</td>' +
            '<td style="text-align: center;vertical-align: middle;font-size: 16px;height: 30px;width:9%;border: 1px solid #000000">' + obj.+ '</td>' +
            '<td style="text-align: center;vertical-align: middle;font-size: 16px;height: 30px;width:9%;border: 1px solid #000000">' + obj.+ '</td>' +
            '<td style="text-align: center;vertical-align: middle;font-size: 16px;height: 30px;width:9%;border: 1px solid #000000">' + obj. + '</td>' +
            '<td style="text-align: center;vertical-align: middle;font-size: 16px;height: 30px;width:9%;border: 1px solid #000000">' + obj. + '</td>' )
        tr.append(td);

        $("#table1").append(tr);
    })

3.生成word文档并下载到本地函数

代码如下（示例）：

$("#printFiled").wordExport(文件名字);

4.需要的js文档

1.FileSaver.js

var saveAs = saveAs || (function