vue截圖界面保存本地

使用html2canvas把界面生成圖片

 

下載 html2canvas 依賴：

npm install html2canvas -S

 

需要使用 html2canvas 頁面引入該依賴：

import html2canvas from 'html2canvas'

 

html代碼：

<template>
    <div>
        <div @click="saveImage()">截圖保存圖片</div>
        <div ref="ImageContent">
            界面內容...........
        </div>
    </div>
</template>    

 

JS生成圖片並下載保存代碼：

saveImage() {
      const ImageDiv= this.$refs.ImageContent;
      //使用html2canvas把界面內容生成圖片
      html2canvas(ImageDiv).then(res => {
        var dataUrl = res.toDataURL('image/jpeg', 1.0);//圖片轉為下載路徑
        var a = document.createElement('a');//創建a標簽
        a.href = dataUrl;
        a.download = '系統模塊.png';//設置圖片名稱
        a.click();
      });
}