vue如何將html內容轉為圖片并下載到本地

更新時間：2023年01月16日 08:35:10 作者：阿wei程序媛

這篇文章主要介紹了vue如何將html內容轉為圖片并下載到本地，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

將html內容轉為圖片并下載到本地

需求：將自己寫的html內容轉化為圖片并可以下載到本地

1.安裝html2canvas

npm install --save html2canvas

2.在自己所需要的頁面進行引入

import html2canvas from "html2canvas";

3.html

<div class="popuptop" id="img">
? ? <div class="pupupbg">
? ? ? ? 內容內容內容
? ? </div>
</div>
?<div class="weixin" @click="downimg">
? ? ?<div class="weixinlogo" >
? ? ? ? ?<img src="../../assets/images/mypage/down.png">
? ? ? ? ? <p class="weixinshare" >下載</p>
? ? ? </div>
</div>
<a id="downimg" href="" style=" rel="external nofollow" display:none"></a>

4.JS

//下載圖片
let downimg= ()=>{
? setTimeout(()=>{
? ? proxy.$nextTick(()=>{
? ? ? html2canvas(document.querySelector('#img'),{
? ? ? ? useCORS: true
? ? ? }).then(canvas => {
? ? ? ? var url = canvas.toDataURL() ? ? //把canvas轉成base64
? ? ? ? // 寫一個隱藏的按標簽，借助按標簽的download屬性下載圖片
? ? ? ? document.querySelector('#downimg').href = url
? ? ? ? document.querySelector('#downimg').download = "我的持倉報告.png"
? ? ? ? document.querySelector('#downimg').click()
? ? ? })
? ? })
? },2000)
}

以上代碼就能實現將html內容轉為圖片并下載到本地。

vue將html頁面轉為圖片并且下載該圖片

1.下載 html2canvas

npm install html2canvas

2.對應頁面引入該插件

import html2canvas from 'html2canvas';

3.具體用法（要element使用帶有一些（可選）選項的 html2canvas 呈現，只需調用html2canvas(element, options);）

html2canvas(document.body).then(function(canvas) {
? ? document.body.appendChild(canvas);
});

4.轉為圖片并且下載

<template>
?? ?<div>
?? ??? ?<div class="container" ref="imageDom">hahahah</div>
?? ??? ?<button @click="toImage">導出</button>
?? ?</div>
</template>

在methods方法中：

toImage() {
? ? html2canvas(this.$refs.imageDom, {
? ? ? ? backgroundColor: '#ffffff'
? ? }).then(canvas => {
? ? ? ? var imgData = canvas.toDataURL("image/jpeg");
? ? ? ? this.fileDownload(imgData);
? ? })
},
fileDownload(downloadUrl) {
? ? let aLink = document.createElement("a");
? ? aLink.style.display = "none";
? ? aLink.href = downloadUrl;
? ? aLink.download = "監(jiān)控詳情.png";
? ? // 觸發(fā)點擊-然后移除
? ? document.body.appendChild(aLink);
? ? aLink.click();
? ? document.body.removeChild(aLink);
},

效果圖：