HTML5 前端将 dom 元素转化为 Word，EXCEL 或者图片并实现下载

< 一 > word

1，依赖于 jquery.html.word.js 插件 => https://blog-static.cnblogs.com/files/lovling/jquery.html.word.js

2，该插件依赖于 jquery，需要先引入 jquery , 使用方式如下

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>jQuery 之 HTML 生成 Word 文档</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>

    <script src="https://blog-static.cnblogs.com/files/lovling/jquery.html.word.js"></script>

</head>

<body>

    <div id="box">

        <h1 style="font-size: 14px; color: red;">你好啊</h1>

        <img src="./123.jpg" width="100" height="100" />

        <table width="300" border="1" cellspacing="0" cellpadding="0">

            <tr style="text-align: center;">

                <td>第1列</td>

                <td>第2列</td>

                <td>第3列</td>

                <td>第4列</td>

                <td>第5列</td>

            </tr>

            <tr style="text-align: center;">

                <td>第1列</td>

                <td>第2列</td>

                <td>第3列</td>

                <td>第4列</td>

                <td>第5列</td>

            </tr>

            <tr style="text-align: center;">

                <td>第1列</td>

                <td>第2列</td>

                <td>第3列</td>

                <td>第4列</td>

                <td>第5列</td>

            </tr>

        </table>

    </div>

    <button id="leading-out">导出 Word</button>

</body>

<script type="text/javascript">

    /**

     * 支持各种标签, 支持行间样式, 不支持全局样式

     * 图片不支持 style 样式, 支持标签本身属性，不支持不同域名的图片

     * 支持表格, 支持表格行间样式

     * 不支持 form 表单

     */

    $("#leading-out").click(function() {

        $("#box").wordExport();

    });

</script>

</html>

3，效果，可能会有些许偏差

< 二 > excel

1，依赖于 jquery.table.excel.js 插件 => https://blog-static.cnblogs.com/files/lovling/jquery.table.excel.js

2，该插件依赖于 jquery，需要先引入 jquery , 使用方式如下

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jQuery 之 TABLE 生成 Excel 文档</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>

    <script src="https://blog-static.cnblogs.com/files/lovling/jquery.table.excel.js"></script>

</head>

<style type="text/css">

    .box {

        width: 600px;

    }

    td {

        text-align: center;

        vertical-align: middle;

    }

    #btn {

        width: 600px;

        height: 50px;

        line-height: 50px;

        text-align: center;

        font-size: 16px;

        color: red;

    }

</style>

<body>

    <div class="box">

        <table width="600" height="400px" border="1">

            <tr class="no">

                <td>该行不会被输出到excel中</td>

                <td>该行不会被输出到excel中</td>

            </tr>

            <tr>

                <td>这一行会被导出到excel中</td>

                <td>这一行会被导出到excel中</td>

            </tr>

            <tr>

                <td>单元格1-1</td>

                <td>单元格1-2</td>

            </tr>

            <tr>

                <td>单元格2-1</td>

                <td>单元格2-2</td>

            </tr>

            <tr>

                <td>单元格3-1</td>

                <td>单元格3-2</td>

            </tr>

            <tr>

                <td colspan="2">123</td>

            </tr>

        </table>

        <button id="btn">点击这里将表格内容导出到excel中</button>

    </div>

</body>

<script type="text/javascript">

    $("#btn").click(function() {

        $(".box").table2excel({

            exclude: ".no",          // 不被生成的行

            filename: "myFileName",  // 生成的文件名称

            exclude_img: true,       // 是否过滤图片

            exclude_links: true,     // 是否过滤 a 标签

            exclude_inputs: true     // 是否过滤表单

        });

    });

</script>

</html>

< 三 > IMG

1，依赖于 html.canvas.js 插件 => https://blog-static.cnblogs.com/files/lovling/html.canvas.js

2，使用方式

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>页面截屏</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>

    <script src="https://blog-static.cnblogs.com/files/lovling/html.canvas.js"></script>

</head>

<style type="text/css">

    #box {

        width: 360px;

    }

    .dom-area {

        width: 360px;

        background: white;

    }

    .dom-area-line {

        height: 44px;

        font-size: 0;

        border-bottom: 1px solid #e5e5e5;

    }

    .dom-area-line > span {

        display: inline-block;

        vertical-align: top;

        line-height: 44px;

        width: 60px;

        font-size: 14px;

        text-indent: 14px;

    }

    .dom-area-line > input {

        display: inline-block;

        vertical-align: top;

        border: none;

        height: 42px;

        line-height: 42px;

        width: 300px;

        outline: none;

    }

    .cut-button {

        font-size: 0;

        height: 44px;

        background: #000000;

    }

    .cut-button > a {

        display: inline-block;

        width: 180px;

        line-height: 44px;

        font-size: 16px;

        color: #ffffff;

        text-align: center;

        text-decoration: none;

    }

    .cut-area {

        width: 360px;

    }

    .cut-area > canvas {

        width: 360px;

    }

</style>

<body>

<div id="box">

    <div class="dom-area">

        <div class="dom-area-line">

            <span>姓名:</span>

            <input type="text" />

        </div>

        <div class="dom-area-line">

            <span>性别:</span>

            <input type="text" />

        </div>

        <div class="dom-area-line">

            <span>生日:</span>

            <input type="text" />

        </div>

    </div>

    <div class="cut-button">

        <a id="cuts-outs">截屏</a>

        <a id="down-load">下载</a>

    </div>

    <div class="cut-area"></div>

</div>

</body>

<script type="text/javascript">

    var domArea = $('.dom-area');

    var cutArea = $('.cut-area');

    var downLoad = $("#down-load");

    $("#cuts-outs").on("click", function (ev) {

        html2canvas(domArea, {

            onrendered: function (canvas) {

                // 将生成的 canvas 放入到 dom 中, 这里可以做画布操作

                cutArea.append(canvas);

                // 将操作完成的画布转化为 base64 编码的文件

                dataURL = canvas.toDataURL("image/png");

                console.log(dataURL);

                // 将文件设置到下载区, 点击就能下载了

                downLoad.attr("href", dataURL);

                downLoad.attr("download", 'myjobdeer.png');

            }

        });

    });

</script>

</html>

3，效果如下

HTML5 前端将 dom 元素转化为 Word，EXCEL 或者图片并实现下载的更多相关文章

jQuery.sort对DOM元素进行排序
实例: 每个tr的第三列显示的都是数字,我们就以这数字列作为排序依据,方法就是利用jquery的sort()方法. 首先,利用jquery选择器获取每个tr元素,获取回来是一个数据: var $trs ...
2、Python djang 框架下的word Excel TXT Image 等文件的下载
2.python实现文件下载 (1)方法一.直接用a标签的href+数据库中文件地址,即可下载.缺点:word excel是直接弹框下载,对于image txt 等文件的下载方式是直接在新页面打开. ...
HTML5中DOM元素的querySelector/querySelectorAll的工作机制
在HTML5中,提供了强大的DOM元素选择API querySelector/querySelectorAll,允许使用JavaScript代码来完成类似CSS选择器的DOM元素选择功能.通常情况下, ...
HTML DOM元素的Dragdrop
在前端web页面中,为了提高用户体验,通常会希望将页面中的元素设计成可dragdop的,简化用户操作.这一设计特性在缺少鼠标的触摸屏设备上,显得更为重要. 在早期的应用中,我们通常需要借助第三方的ja ...
返本求源——DOM元素的特性与属性
抛砖引玉很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr.prop.某天代码复查时,见到一段为某节点设置文本的代码: attr.set(node, 'inner ...
OriDomi – 像折叠纸张一样折叠 DOM 元素
Web 原本是扁平化的,但是现在你可以折起来.OriDomi 是一个开源的 JavaScript 库,使得 DOM 元素能够实现像纸折一样折叠的效果.在创建你所看到的场景背后,OriDomi 做了大量 ...
HTML5前端（移动端网站）性能优化指南
HTML5是一种最新发布网页构架的普遍模型,是构建对程序.对用户都更有价值的数据驱动的Web的前端技术框架,它的价值在于融合CSS/javaScript/flash等众多前端开发技术,更多的体现在对交 ...
HTML5学堂全新的HTML5/前端技术分享平台
HTML5学堂全新的HTML5/前端技术分享平台 HTML5学堂是做什么的? HTML5学堂~http://www.h5course.com~由多名热爱H5的讲师们组成的一个组织.致力于构建一个前端 ...
html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...

随机推荐

学习笔记TF054:TFLearn、Keras
元框架(metaframework). TFLearn.模块化深度学习框架,更高级API,快速实验,完全透明兼容. TFLearn实现AlexNet.https://github.com/tflear ...
STM32 BOR/POR/PDR介绍
以STM32为例,介绍单片机中的BOR/POR/PDR1)PVD = Programmable Votage Detector 可编程电压监测器它的作用是监视供电电压,在供电电压下降到给定的阀值以下 ...
VMware vSphere Client 语言切换
vpxclient -locale en_US 英语 vpxclient -locale zh_CN 汉语 vpxclient -locale ja 日语 vpxclient -locale de ...
《Self-Attention Generative Adversarial Networks》里的注意力计算
前天看了 criss-cross 里的注意力模型仔细理解了在: https://www.cnblogs.com/yjphhw/p/10750797.html 今天又看了一个注意力模型 < ...
java8_api_正则表达式
正则表达式什么是正则表达式使用String类中的replaceAll方法使用Pattern类编译正则表达式使用Matcher类匹配正则表达式什么是正则表达式 ...
20175202 《Java程序设计》第九周学习总结
20175202 2018-2019-2 <Java程序设计>第九周学习总结教材知识点总结第11章 JDBC与MySQL数据库 MySQL数据库管理系统 MySQL数据库管理系统,简称 ...
Redis入门的简单使用
Redis是什么? redis是一个开源的,面向键/值对的NOSQL的分布式数据库系统 NOSQL指的是非关系型的数据,简单直白地讲就是在非关系型的数据库中不存在表的概念,而是以键值对的方式, 即一个 ...
H3C交换机IRF典型配置举例LACP MAD检测方式
一.组网需求由于公司人员激增,接入层交换机提供的端口数目已经不能满足PC的接入需求.现需要在保护现有投资的基础上扩展端口接入数量,并要求网络易管理.易维护. 二.组网图三.配置思路 Device ...
[转]自建Syncthing中继服务器(私密传输或造福大众)
自建Syncthing中继服务器(私密传输或造福大众) 一.介绍我之前介绍了Syncthing,作为一款开源的文件同步程序,它的功能还是非常强大的,我也很高兴能看到它被越来越多的人知道和使用,前几天 ...
黄聪：PHP获取某一天前后任意时间
date("Y-m-d",strtotime('-30 days',strtotime('2016-9-30')));

HTML5 前端将 dom 元素转化为 Word，EXCEL 或者图片 并实现下载

HTML5 前端将 dom 元素转化为 Word，EXCEL 或者图片 并实现下载的更多相关文章

随机推荐

热门专题

HTML5 前端将 dom 元素转化为 Word，EXCEL 或者图片并实现下载

HTML5 前端将 dom 元素转化为 Word，EXCEL 或者图片并实现下载的更多相关文章