html2canvas使用文檔(vue舉例)

更新時間：2024年03月18日 08:48:59 作者：溫其如玉_zxh

html2canvas.js是一款可以在網頁上實現頁面截圖的js,它使用了html5和css3的一些新功能特性,實現了在客戶端對網頁進行截圖的功能,這篇文章主要給大家介紹了關于html2canvas使用的相關資料,需要的朋友可以參考下

一、安裝

Install NPM

npm install --save html2canvas

Install Yarn

yarn add html2canvas

二、引入

import html2canvas from 'html2canvas';

三、使用

以 vue 舉例，這樣寫起來比較方便

<div ref="picture">
    <h4>Hello world!</h4>
</div>

// 配置項
const setup = {
    useCORS: true, // 使用跨域
};
html2canvas(this.$refs.picture, setup).then((canvas) => {
    document.body.appendChild(canvas); // 自動在下方顯示繪制的canvas圖片
});

如果想要將圖片導出，可以這樣寫

// 生成圖片
creatImg() {
    const setup = {
        useCORS: true, // 使用跨域
    };
    html2canvas(this.$refs.picture, setup).then((canvas) => {
        const link = canvas.toDataURL("image/jpg");
        this.exportPicture(link, "文件名");
    });
}

// 導出圖片
exportPicture(link, name = "未命名文件") {
    const file = document.createElement("a");
    file.style.display = "none";
    file.href = link;
    file.download = decodeURI(name);
    document.body.appendChild(file);
    file.click();
    document.body.removeChild(file);
}

四、配置項

名稱	默認值	描述
allowTaint	`false`	是否允許跨源圖像污染畫布
backgroundColor	`#ffffff`	畫布背景色（如果在DOM中未指定），為透明設置null
canvas	`null`	用作繪圖基礎的現有畫布元素
foreignObjectRendering	`false`	如果瀏覽器支持ForeignObject渲染，是否使用它
imageTimeout	`15000`	加載圖像超時（毫秒），設置為0可禁用超時
logging	`true`	為調試目的啟用日志記錄
proxy	`null`	用于加載跨源圖像的代理的Url。如果留空，則不會加載跨原點圖像。
removeContainer	`true`	是否清除html2canvas臨時創(chuàng)建的克隆DOM元素
scale	`window.devicePixelRatio`	用于渲染的比例。默認為瀏覽器設備像素比率。
useCORS	`false`	是否嘗試使用CORS從服務器加載圖像
width	`Element` width	畫布的寬度
height	`Element` height	畫布的高度
x	`Element` x-offset	裁剪畫布x坐標
y	`Element` y-offset	裁剪畫布y坐標
scrollX	`Element` scrollX	渲染元素時要使用的x滾動位置（例如，如果元素使用位置：fixed）
scrollY	`Element` scrollY	渲染元素時要使用的y軸滾動位置（例如，如果元素使用位置：fixed）
windowWidth	`Window.innerWidth`	渲染Element時使用的窗口寬度，這可能會影響Media查詢等內容
windowHeight	`Window.innerHeight`	渲染Element時使用的窗口高度，這可能會影響Media查詢等內容