在我們的日常開發(fā)場景中，表單打印是一個(gè)比較常見的場景，微搭本身不帶打印功能，我們需要借助一個(gè)第三方的庫來實(shí)現(xiàn)打印。
1 引入第三方庫
在微搭中如果需要引入第三方庫的，需要打開你所在的應(yīng)用，在應(yīng)用編輯器側(cè)邊欄導(dǎo)航找到最后一個(gè)菜單
輸入我們的第三方庫的地址
https://html2canvas.hertzen.com/dist/html2canvas.min.js
引入庫的時(shí)候要確保地址是可訪問的
熟悉前端開發(fā)的小伙伴可能更習(xí)慣使用npm進(jìn)行安裝，微搭不支持npm的形式，只可以引入外部的js
2 搭建頁面
我們打印的時(shí)候，一般是在PC端上使用，因此構(gòu)建的時(shí)候我們要選擇PC的模式
打印場景一般是在查看頁面，我們的查看頁面可以使用表單容器完成，表單容器的場景我們選擇查看，為了演示方便我們需要設(shè)置一個(gè)ID
再一個(gè)就是設(shè)置打印區(qū)域的問題，html2canvas庫實(shí)現(xiàn)的原理是給頁面拍一個(gè)照片，我們拍哪個(gè)區(qū)域比較合適呢？
因?yàn)榭紤]到電腦屏幕的大小不同，有的是比較寬有的又比較窄，因此我們?cè)O(shè)置我們的打印區(qū)域的寬度為1080
為了實(shí)現(xiàn)這個(gè)效果，我們給表單容器設(shè)置了兩層的普通容器作為布局。第一層呢我們是讓頁面充滿屏幕，第二層就是打印區(qū)域設(shè)置一個(gè)固定寬度。
第一層我們?cè)O(shè)置讓我們內(nèi)部的元素橫向排列，居中對(duì)齊
第二層容器設(shè)置一個(gè)固定寬度
3 實(shí)現(xiàn)打印
打印區(qū)域設(shè)置好了之后，就需要定義一個(gè)方法來調(diào)用我們的第三方庫
我們給打印按鈕設(shè)置一個(gè)自定義方法，命名為print
在print方法里輸入如下的代碼
export default async function({event, data}) {
const element = document.querySelector(`#container6`) // 選擇到要打印的組件id或者class，轉(zhuǎn)換為canvas，其中 idXXX 表示要打印的元素
if(!element) {
throw new Error('要打印的內(nèi)容不存在')
}
const { width, height } = element.getBoundingClientRect()
const canvas = await window.html2canvas(element)
// 打印
let winPrint = window.open('', '', `left=0,top=0,width=${width},height=${height},toolbar=0,scrollbars=0,status=0`);
winPrint.document.body.appendChild(canvas);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
}
首先需要選擇打印的區(qū)域，我們是設(shè)置的第二個(gè)普通容器，需要選擇一下容器的ID
const element = document.querySelector(`#container6`)
打印區(qū)域設(shè)置好之后，我們需要得到元素的寬和高
const { width, height } = element.getBoundingClientRect()
不熟悉JS語法的同學(xué)可能對(duì)這個(gè)不是太理解，這個(gè)叫解構(gòu)賦值，通過結(jié)構(gòu)賦值就將右邊調(diào)用的方法得到的返回值分別賦值給了左側(cè)的兩個(gè)變量width和height
我們這里是對(duì)象的解構(gòu)，將對(duì)象分別賦值給屬性，如果你閱讀官方模板還會(huì)看到數(shù)組的解構(gòu)
const canvas = await window.html2canvas(element)
這一行代碼相當(dāng)于將獲取到的打印元素設(shè)置到我們的畫布里，其余的代碼就是調(diào)用了瀏覽器的打印功能
4 實(shí)現(xiàn)效果
代碼設(shè)置好之后，我們點(diǎn)擊預(yù)覽功能，然后點(diǎn)擊打印按鈕就可以看到具體的效果
文章來源：http://www.zghlxwxcb.cn/news/detail-525154.html
總結(jié)
本篇帶著大家實(shí)現(xiàn)了一下表單打印的功能，表單打印需要是在PC環(huán)境，而且要正確的設(shè)置打印區(qū)域并調(diào)用html2canvas庫實(shí)現(xiàn)，需要的同學(xué)照著教程練習(xí)一遍吧。文章來源地址http://www.zghlxwxcb.cn/news/detail-525154.html
到了這里，關(guān)于微搭低代碼實(shí)現(xiàn)表單打印功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
