大概下載了幾百?gòu)垐D片蹚出的坑。。。
1. html2canvas生成圖片有白邊
沙盒環(huán)境下面有白邊
image.png
開(kāi)發(fā)機(jī)環(huán)境上面有白邊
image.png
本地沒(méi)問(wèn)題，以為是自己寫(xiě)的樣式問(wèn)題導(dǎo)致html2canvas生成圖片隨機(jī)
查找方向：一個(gè)一個(gè)dom節(jié)點(diǎn)刪除 刪光了發(fā)現(xiàn)還有一條白邊
image.png
崩潰了 開(kāi)始找自己的節(jié)點(diǎn)外面的dom
居然在header上面 發(fā)現(xiàn)了個(gè)div！??！差點(diǎn)當(dāng)初氣死 立刻搜索代碼去查這是誰(shuí)寫(xiě)的
image.png
emmm沒(méi)搜到....
我?guī)煾嫡f(shuō) 是不是瀏覽器插件 你都關(guān)掉試試
我一點(diǎn)進(jìn)開(kāi)發(fā)者工具 就看到了這個(gè)罪魁禍?zhǔn)祝?/p>
image.png
我次喔 勞資安裝你干嘛了 翻譯沒(méi)用到 開(kāi)發(fā)用到了
2.html2canvas滾動(dòng)圖片不全
image.png
獲取截圖元素前 把頁(yè)面滾動(dòng)到初始位置
window.scrollTo(0, 0);
3.html2canvas css樣式限制行數(shù)無(wú)效
表格里限制行數(shù)，第一反應(yīng)肯定css樣式，結(jié)果發(fā)現(xiàn)canvas里沒(méi)有畫(huà)出內(nèi)容
overfliw: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
image.png
于是只能在js上做文章，算出3行字?jǐn)?shù)超出截取文字，并加...
但是中英文混合情況下就要把中文換成2個(gè)字節(jié)，在計(jì)算
/**
* table列三行截?cái)? * @param {string} t 截取的字符串
* @param {number} e 截取的長(zhǎng)度
*/
getTextLength(t, e) {
var t = t.substr(0, e).replace(/([^\x00-\xff])/g, "$1 ");
var res = t.substr(0, e).replace(/[^\x00-\xff]$/, "").replace(/([^\x00-\xff]) /g, "$1");
return res + (t.length > e ? '...' : '');
}
image.png
4.html2canvas 下載圖片是.txt格式
因?yàn)閏anvas太大了，調(diào)整下width 和 height，居然沒(méi)深究
image.png
