html页面导出word文档

66 阅读 0 评论 44 点赞

我是靠谱客的博主会撒娇皮皮虾，最近开发中收集的这篇文章主要介绍html页面导出word文档，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

找了网上很多资料，发现很多都是采取jquery-word-export 方式进行导出，然后测试了下确实可以，但是还需要引入jq文件，对于代码有强迫的我来说，有点受不了。

看了评论，很多问题都是定义的样式在word没有生效，其实我已经把所有样式传进了word，word并没有识别，具体怎么处理有时间研究（最近比较忙~~）

花了一些时间整理了下，基本借鉴jquery-word-export方式，开发了一个npm包，剔除jq，同时支持图片、以及样式的导出

npm install -D js-export-word

import exportWord from 'js-export-word'

const wrap = document.getElementById('test')
const config = {
      addStyle:true, // 是否导出样式，默认为true，此操作会将所有样式转换成行内样式导出
      fileName:'测试文件', // 导出文件名
      toImg:['.need-to-img','.bg-danger'], // 页面哪些部分需要转化成图片，例如echart图表之类
      success(){} // 完成之后回调，一般页面篇幅比较大，时间比较长
}
exportWord(wrap,config)

github：GitHub - huangbohang/export-word: 一个html导出为word的JS库；

npm地址：js-export-word - npm

案例地址：https://huangbohang.github.io/export-word/examples/

可以试试，目前满足自己需求，因为只有我自己用，也不知道还有些什么其他bug，大家可以提出来，一起改进

案例代码：

请通过服务器打开

cnpm hs
hs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script src="https://huangbohang.github.io/export-word/dist/export-word.js"></script>
    <style>
        .main{
            width:800px;
            margin: auto;
        }
        .bs-example-bg-classes p {
            padding: 15px;
        }
        #echart-block{
            width: 500px;
            height: 300px;
        }
        button{
            position: fixed;
            left: 0;
            top: 20px;
        }
    </style>
</head>
<body>
    <div class="main ">
            <h1>h1. Bootstrap heading</h1>
            <h2>h2. Bootstrap heading</h2>
            <h3>h3. Bootstrap heading</h3>
            <h4>h4. Bootstrap heading</h4>
            <h5>h5. Bootstrap heading</h5>
            <h6>h6. Bootstrap heading</h6>
            For example, <code>&lt;section&gt;</code> should be wrapped as inline.
    
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient
                montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
    
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper
                nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
                lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
    
                Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget
                metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
            <h1>echart图表</h1>
            <div id="echart-block" class="need-to-img"></div>
            <div class="bs-example bs-example-bg-classes" data-example-id="contextual-backgrounds-helpers">
                <p class="bg-primary"> Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
                <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
                <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
            </div>
            <img src="./chelizi.jpg" alt="..." class="img-rounded">
            <img src="./chelizi.jpg" alt="..." class="img-circle">
            <img src="./chelizi.jpg" alt="..." class="img-thumbnail">
            <h1>table</h1>
            <div class="need-to-img">
                <table class="table " >
                    <tr>
                        <th>日期</th>
                        <th>姓名</th>
                        <th>地址</th>
                    </tr>
                    <tr>
                        <td>2016-05-02</td>
                        <td>王小虎</td>
                        <td>上海市普陀区金沙江路 1518 弄'</td>
                    </tr>
                    <tr>
                        <td>2016-03-21</td>
                        <td>张小花</td>
                        <td>上海市普陀区金沙江路 1512 弄'</td>
                    </tr>
                    <tr>
                        <td>2016-01-4</td>
                        <td>李晓东</td>
                        <td>上海市普陀区金沙江路 1513 弄'</td>
                    </tr>
                    <tr>
                        <td>2016-04-02</td>
                        <td>王大哈</td>
                        <td>上海市普陀区金沙江路 1522 弄'</td>
                    </tr>
                    <tr>
                        <td>2016-05-12</td>
                        <td>李晓春</td>
                        <td>上海市普陀区金沙江路 1518 弄'</td>
                    </tr>
                </table> 
            </div>
           
    </div>
    <button type="button" class="btn btn-primary">download</button>

    <script>
        var myChart = echarts.init(document.getElementById('echart-block'));
        // 绘制图表
        myChart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    </script>
    <script>
        const wrap = document.querySelector('.main')
        document.getElementsByTagName('button')[0].onclick = function(){
        
           exportWord(wrap,{
              fileName:'测试文件',
              toImg:['.need-to-img','.bg-danger']
          })
      }
        

 
    </script>
</body>
</html>