JS如何匯出Div的內容為圖片

最後更新：2017-07-25 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：code 匯出到excel family title 匯出 href ml2 wim UI

最近因為項目需要，研究了幾天用js匯出頁面上的div為圖片。項目需求是這樣的，一個頁面上有統計圖和統計表，另外一部分是地圖，當使用者點擊匯出報告時，需要將頁面內容匯出到Excel，統計表可以從後台查出列表，然後以表格形式匯出；統計通採用的echarts，可以轉換為base64編碼，然後幕後處理之後匯出。但是地圖這塊就有點難了，首先地圖不是一張圖片，其次地圖的圖片不在本地，所以雖然我自己的功能沒實現，但是研究出了div匯出為圖片，需要的就拿走。

div匯出為圖片，並不是直接完成的，原理可以認為截取螢幕上div大小，然後轉換為圖片格式。現在有兩種方式，首先是將div轉換為HTML5的畫布，然後畫布轉換成base64編碼，傳回後台進行處理；第二種是先把div內容轉成svg，然後再轉換成base64。

第一種

<html>        <head>            <meta name="layout" content="main">            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />              <script type="text/javascript" src="jquery-1.8.3.min.js"></script>            <script type="text/javascript" src="html2canvas.js"></script>                         <script  type="text/javascript" >        $(document).ready( function(){                    $(".button").on("click", function(event) {                            event.preventDefault();                            html2canvas(document.getElementById("textArea"), {                            allowTaint: true,                            taintTest: false,                            onrendered: function(canvas) {                                canvas.id = "mycanvas";                                //產生base64圖片資料                                var dataUrl = canvas.toDataURL();                                var newImg = document.createElement("img");                                newImg.src =  dataUrl;                                document.body.appendChild(newImg);                            }                        });                    });         });            </script>        </head>        <body>             <div class="" style="background-color: white;">                 測試圖片          </div>                         <textArea id="textArea" col="20" rows="10" ></textArea>            <input class="button" type="button" value="button">測試</input>        </body>    </html>

這個方式有要注意的問題，是在canvas.toDataUrl()這個方法，這個方法是把canvas轉換成base64碼，如果你的div中是圖片的話，那麼這個方法是執行不成功的。另外，上面提到的匯出地圖的功能，因為地圖是多張圖片，同時圖片在伺服器上，所以涉及到跨域和多張圖片資訊的問題，這時候也是執行不成功的。

第二種

<!DOCTYPE html>  <html>      <head>          <script type="text/javascript" src="jquery-1.8.3.min.js"></script>            <script type="text/javascript" src="html2canvas.js"></script>        </head>      <body>          <h2>Output Image:</h2>          <script>              function cutDiv(){                  var divContent = document.getElementById("div").innerHTML;                  var data = "data:image/svg+xml," +                  "<svg xmlns=‘http://www.w3.org/2000/svg‘ width=‘200‘ height=‘200‘>" +                  "<foreignObject width=‘100%‘ height=‘100%‘>" +                  "<div xmlns=‘http://www.w3.org/1999/xhtml‘ style=‘font-size:16px;font-family:Helvetica‘>" +                  divContent +                  "</div>" +                  "</foreignObject>" +                  "</svg>";                  var img = new Image();                  img.src = data;                  var canvas = document.createElement("canvas");                  var ctx =  canvas.getContext("2d");                  img.crossOrigin="anonymous";                  img.src = "data:image/svg+xml,<svg xmlns=‘http://www.w3.org/2000/svg‘></svg>";                  ctx.drawImage(img, 0, 0);                  var canvasbase = canvas.toDataURL();                  alert(canvasbase);              }                        </script>          <div id="div">              <img src="Koala.jpg" style="width:400px;height:300px"/>          </div>          <input type="button" value="click" onclick="cutDiv()"/>      </body>  </html>

這種是先把html拼接為svg，然後將組成的svg串賦給一個img的src，然後在畫布上畫出這個img，最後執行canvas的toDataUrl方法來獲得base64碼。

這種方式也沒能成功匯出地圖，地圖是openlayers做的，本身就是svg，在ctx.drawImage()方法執行時，出現錯誤，所以沒成功。

對於其他比較常用的情況，上面兩種轉換效果還是蠻好的，如果有用得到的只管拿走；如果上面寫的有什麼不合適的，請批評指正；另外如果有做過匯出地圖為圖片到word文檔的，希望您能不吝賜教，謝謝。

轉自：http://blog.csdn.NET/fengyao1995/article/details/51842486

JS如何匯出Div的內容為圖片

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More