如何使用 JavaScript 或 jQuery 正确保存和下载 div 内容答案

【问题标题】：How to properly save and download div content using either JavaScript or jQuery如何使用 JavaScript 或 jQuery 正确保存和下载 div 内容
【发布时间】：2020-01-29 06:59:34
【问题描述】：

我正在尝试将div 内容保存并下载为图像。我求助于this solution，它建议使用html2canvas。

我已经实现了下面的代码，但无法将div 内容保存并下载为图像。如何在 jQuery 或 JavaScript 中做到这一点？

到目前为止，这是我的代码：

<!doctype html>
<html>

<head>

  <script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>

</head>

<body>
  <h1> Div Data to be Save and Download</h1>
  <div class="div1" id='div1'>
    <h2> Iam Div1</h2>
    <img src='images/div1_image.jpg' width='100' height='100'>

  </div><br/>
  <input type='button' id='but_screenshot' value='Download as Image' onclick='download();'><br/><br/>





  <!-- Script -->
  <script type='text/javascript'>
    function download() {
      // html2canvas(document.body).then(function(canvas) {

      html2canvas(document.getElementById('div1')).then(function(canvas) {

        document.body.appendChild(canvas);
      });
    }
  </script>

</body>

</html>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

用下面的代码扩展你的 download() 函数：

    function download() {
         html2canvas(document.getElementById("div1")).then(function(canvas) {
            document.body.appendChild(canvas);

            const image = canvas.toDataURL("image/png", 1.0);
            const link = document.createElement("a");

            link.download = "my-image.png";
            link.href = image;
            link.click();
      });
     }

点击后您将获得下载的文件

【讨论】：

谢谢@Pasha。它只保存和下载 div <h2> Iam Div1</h2> 中的文本，但 div 内的图像不会与文本 <img src='images/div1_image.jpg' width='100' height='100'> 一起被捕获和下载，这可能是什么问题。谢谢
@NancyMooree 嗯，我拿了你的代码并放了示例图像。我可以在下载的文件中看到它。尝试检查文件'src='的路径
你是对的。您将需要静态托管应用程序或通过服务器运行它，例如 Wamp/xampp 以显示图像。谢谢