Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地

最新推荐文章于 2024-05-31 18:11:37 发布

.NET跨平台

最新推荐文章于 2024-05-31 18:11:37 发布

阅读量754

点赞数

分类专栏： Html+Javascript

原文链接：https://blog.csdn.net/WuLex

版权

Html+Javascript 专栏收录该内容

258 篇文章 12 订阅

订阅专栏

由于客户的需求，将js写出来的一个统计能够保存到本地。作为码奴的我只能慢慢搬砖咯！一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷。话不多说开始搞！

1、引入几个JS库

①：jquery 版本还没试过我用的是3.1.1 （不贴链接了，这个要找很容易）

②：dom-to-image.js （点击下载下载下来解压开在src目录里面）

③：FileSaver.js （点击下载下载下来解压开在src目录里面）

2、新建HTML引入第一步中的几个库

在这里插入图片描述

3、生成图片

3.1、生成png图片

<script>
var jd= document.getElementById('标签ID');
domtoimage.toPng(jd)
    .then(function (url) {
        var img = new Image();
        img.src = url;
        document.body.appendChild(img);
    })
    .catch(function (e) {
        console.log('生成图片出错', e);
    });
</script>

3.2、生成下载图片

//保存图片
        $("#btnToImg").click(function () {
            domtoimage.toBlob(document.getElementById('chartdiv'))
                .then(function (blob) {
                    window.saveAs(blob, 'ImgName.jpg');
                });
        });

我写的是一个按钮的点击事件

3.3、生成jpeg图片

 domtoimage.toJpeg(document.getElementById('chartdiv'), { quality: 0.95 })
                .then(function (dataUrl) {
                    var link = document.createElement('a');
                    link.download = 'Imgname.jpeg';
                    link.href = dataUrl;
                    link.click();
                });

使用的额时候只要调方法就可以了

下面贴上Demo源码

<html>
<head>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript" src="dom-to-image.js"></script>
    <script type="text/javascript" src="FileSaver.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#btnSave").click(function () {
                // 下载png图片
                domtoimage.toBlob(document.getElementById('dvMain'))
                    .then(function (blob) {
                        window.saveAs(blob, '123.png');
                    });
            });
        });
    </script>
</head>
<body>
     <input type="button" id="btnSave" value="保存图片" />
    <div id="dvMain">
<h1>123456789</h1>

<h2>H2H2H2</h2>
<p>段落里面的内容</p>
<span>span里面的内容</span>
    <table id="table" border="1" style="width:200px;border-collapse: collapse;border:1px solid black; width:80%;">
        <tr>
            <td rowspan="3">111</td>
            <td>222</td>
            <td>333300</td>
        </tr>
        <tr>
            <td rowspan="2">444</td>
            <td>555</td>
        </tr>
        <tr >
            <td>666</td>
        </tr>
        <tr>
            <td rowspan="3">77</td>
            <td>888</td>
            <td>999</td>
        </tr>
        <tr >
            <td>000</td>
            <td>QQQ</td>
        </tr>
        <tr>
            <td>WWW</td>
            <td>EEE</td>
        </tr>
    </table>
    </div>
</body>
</html>

中间表格中海油跨行跨列的都没有什么问题。

4、问题:

我现在是弄好了保存成png或者是jpg的时候用win10 系统自带的windows自带的照片查看器看着会模糊不知道是我个人电脑的问题还是都是这个问题
在这里插入图片描述
看着就这种。

用附件中的画画和其他工具打开又没有什么问题
在这里插入图片描述

domtoimage----将指定页面生成图片

在项目中有个需求，点击按钮将指定页面部分生成图片保存到本地，最后选择了dom-to-image这个js方法

1.下载`jquery.min.js、dom-to-image.js、FileSaver.js`

FileSaver.js文件百度网盘地址：
        链接：https://pan.baidu.com/s/1W_g2azndSt7yNqQbJGpnbQ 
        提取码：iklw 
dom-to-image.js文件百度网盘地址：
        链接：https://pan.baidu.com/s/1sCwDb065585DfF9GmF6zEA 
        提取码：2up2

2.创建一个简单的测试`demo`

<!DOCTYPE html>
<html>
<head>
    <title>山有木兮</title>
    <meta charset="utf-8">
    <style>
        body {
            width: 35em;
            margin: 0 auto;
            font-family: Tahoma, Verdana, Arial, sans-serif;
            font-family:simsun;
            background-color: #DCDCDC;
        }
    </style>
</head>
<body>
    <div id="allinfo" style="border:1px solid #696969">
        <div style="width:100%;height:300px;margin-top:100px">
            <center>
                <h1>This Is Why We Play</h1>
                <h2>MAKE MORE TIME</h2>
                <h2 style="color:#D3D3D3">至于唇齿,掩于岁月</h2>
                <h2>traveling light</h2>
                <h2>PHP</h2>
                <img src="https://www.liurulan.cn/light.jpg" style="width:200px;height:200px;border-radius:50%;">
            </center>
        </div>
        <div style="margin-top:250px"><center>
            <a href="http://www.beian.miit.gov.cn" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">工信部备案号:黑ICP备2000XXXX号</p></a>
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=23028102000014" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">黑公网安备 230XXXX200XXXX号</p></a>
        </center></div>
    </div>
    <button id="btn" style="margin-top:50px;margin-left:45%;">生成图片</button>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./js/dom-to-image.js"></script>
    <script type="text/javascript" src="./js/FileSaver.js"></script>
    <script type="text/javascript">
      $(function(){
          $("#btn").click(function(){
            // 下载png图片
           domtoimage.toBlob(document.getElementById('allinfo'))
              .then(function (blob) {
                  window.saveAs(blob, 'my-node.png');
              });  
            })
      })
      </script>
</body>
</html>

3.页面预览

打印预览页面

4.打印结果预览

打印结果页面

5.打印会直接将页面保存成图片保存到浏览器桌面，速度也很快

6.跨域问题

如果页面中有图片引入，那么就需要考虑跨域问题，我使用的是nginx，只需要添加响应头：

编辑nginx.conf文件
修改如下代码：

location / {
            root   html;
            index  index.html index.htm index.php;
            add_header 'Access-Control-Allow-Origin' *;
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        }

重启nginx：

nginx -s reload

7.至此一个简单的html转化图片的功能就完成了

.NET跨平台

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地

由于客户的需求，将js写出来的一个统计能够保存到本地。作为码奴的我只能慢慢搬砖咯！一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷。话不多说开始搞！1、引入几个JS库①：jquery 版本还没试过我用的是3.1.1 （不贴链接了，这个要找很容易）②：dom-to-image.js （点击下载下载下来解压开在src目录里面）③：FileSaver.js （点击下载下载下来解压开在src目录里面）2、新建HTML引入第一步中的几个库3、生成图片3.1、生成png图片
复制链接

扫一扫