vue組件切換教程學(xué)習(xí) vue切換路由時(shí)如何銷毀當(dāng)前頁(yè)面?
vue切換路由時(shí)如何銷毀當(dāng)前頁(yè)面?切換路由時(shí),參照calm-alive組件系統(tǒng)設(shè)置如何確定保存到當(dāng)前頁(yè)面,vue和vuex的區(qū)別?簡(jiǎn)單vue是一個(gè)前端框架(與angular和react同級(jí)別),vue
vue切換路由時(shí)如何銷毀當(dāng)前頁(yè)面?
切換路由時(shí),參照calm-alive組件系統(tǒng)設(shè)置如何確定保存到當(dāng)前頁(yè)面,
vue和vuex的區(qū)別?
簡(jiǎn)單vue是一個(gè)前端框架(與angular和react同級(jí)別),vuex僅僅vue的一個(gè)插件,官網(wǎng)說(shuō)vuex是狀態(tài)管理工具,其實(shí)說(shuō)白了,vuex那是個(gè)存放多個(gè)組件同一臺(tái)的一個(gè)數(shù)據(jù)的存放、更改、全面處理的一個(gè)容器,就是說(shuō)來(lái)存放去處理大學(xué)英語(yǔ)數(shù)據(jù)的工具,貯存的數(shù)據(jù)一變,各個(gè)組件都會(huì)更新,也就是說(shuō)能保存的數(shù)據(jù)是自適應(yīng)響應(yīng)的
vue html轉(zhuǎn)化成pdf內(nèi)容被分割怎么解決?
解決思路
1、聲望兌換DOM
2、將DOM可以轉(zhuǎn)換為canvas
3、資源canvas的寬度、高度(一點(diǎn)稍微大點(diǎn),預(yù)覽)
4、將pdf的寬高設(shè)置為canvas的寬高(不區(qū)分A4紙大?。?/p>
5、將canvas轉(zhuǎn)為圖片
5、靜態(tài)方法jspdf,將內(nèi)容圖片放在pdf中(是因?yàn)閮?nèi)容寬高和pdf寬高一樣的,就只不需要一頁(yè),也能夠防止內(nèi)容截?cái)鄦?wèn)題)
代碼
document.querySelector(.downloadbutton).onclickfunction(e){
varcontentdocument.querySelector(.content)
download(content)
}
functiondownload(content){
html2canvas(content,{
allowTaint:true,
scale:2//進(jìn)階畫面質(zhì)量,只不過(guò)會(huì)減少文件大小
}).then(function(canvas){
/**jspdf將html轉(zhuǎn)為pdf一頁(yè)會(huì)顯示不封鎖住,整體思路:
*1.查看DOM
*2.將DOM轉(zhuǎn)換為canvas
*3.某些canvas的寬度、高度(稍微地大一點(diǎn))
*4.將pdf的寬高設(shè)置為canvas的寬高
*5.將canvas轉(zhuǎn)為圖片
*6.構(gòu)造函數(shù)jspdf,將內(nèi)容圖片裝在pdf中(因?yàn)閮?nèi)容寬高和pdf寬高一樣的,就只是需要一頁(yè),也避兔內(nèi)容截?cái)鄦?wèn)題)
*/
//能夠得到canvas畫布的單位是px像素單位
varcontentWidthcanvas.width
varcontentHeightcanvas.height
console.log(contentWidth,contentWidth)
console.log(contentHeight,contentHeight)
//將canvas轉(zhuǎn)為base64圖片
varpageData(image/jpeg,1.0)
//設(shè)置里pdf的尺寸,pdf要建議使用pt單位三角形的三邊1pt/1px0.75pt(px/scale)*0.75
//2為上面的scale圖像大小了2倍
varpdfX(contentWidth10)/2*0.75
varpdfY(contentHeight500)/2*0.75//500為底部留白
//設(shè)置中內(nèi)容圖片的尺寸,obj是pt單位
varimgXpdfX
varimgY(contentHeight/2*0.75)//內(nèi)容圖片這里不是需要留白的距離
//系統(tǒng)初始化jspdf另一個(gè)參數(shù)方向:設(shè)置為時(shí)為橫向,第二個(gè)參數(shù)設(shè)置pdf內(nèi)容圖片不使用的長(zhǎng)度單位為pt,第三個(gè)參數(shù)為PDF的大小,單位是pt
varPDFfifthjsPDF(,pt,[pdfX,pdfY])
//將內(nèi)容圖片添加到pdf中,是因?yàn)閮?nèi)容寬高和pdf寬高完全不一樣,就只要一頁(yè),位置那就是0,0
(pageData,jpeg,0,0,imgX,imgY)
(download.pdf)
})