JS:dom-to-image网页截图保存

简介: JS:dom-to-image网页截图保存

文档:https://github.com/tsayen/dom-to-image

CDN

<script src="https://cdn.bootcdn.net/ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>

代码示例

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 200px;
        border-collapse: collapse;
        border: 1px solid black;
      }
      tr {
        background: green;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>
  </head>
  <body>
    <input type="button" onclick="saveImage()" value="保存图片" />
    <table id="table">
      <tr>
        <td rowspan="3">200</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td rowspan="2">500</td>
        <td>600</td>
      </tr>
      <tr>
        <td>600</td>
      </tr>
    </table>
    <script>
      function saveImage() {
        domtoimage
          .toPng(document.getElementById("table"))
          .then(function (dataUrl) {
            var link = document.createElement("a");
            link.download = "my-image-name.jpeg";
            link.href = dataUrl;
            link.click();
          });
      }
    </script>
  </body>
</html>

image.png

相关文章
|
4月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
199 0
|
5月前
|
JavaScript 前端开发
js如何渲染页面内容
js如何渲染页面内容
44 0
|
7月前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
46 0
|
8月前
|
JavaScript 前端开发
js的input标签上传图片并转为base64预览
js的input标签上传图片并转为base64预览
131 0
|
8月前
|
JavaScript
js判断图片是否加载完成
js判断图片是否加载完成
87 0
|
JavaScript
进入页面js加载进度条demo效果示例(整理)
进入页面js加载进度条demo效果示例(整理)
进入页面js加载进度条demo效果示例(整理)
|
JavaScript
js进度条载入demo效果示例(整理)
js进度条载入demo效果示例(整理)
|
JavaScript 前端开发
前端html,js实现图片的上传与下载
前端html,js实现图片的上传与下载
255 1
|
JavaScript
Js获取富文本所有图片src地址
Js获取富文本所有图片src地址
145 0
|
JavaScript
JS批量下载网页中的图片!
JS批量下载网页中的图片!