場景
在頁面顯示的時(shí)候是分頁現(xiàn)實(shí)的殿怜，當(dāng)前頁面只有10條數(shù)據(jù)酷勺，但是打印需要打印完整的100條數(shù)據(jù)单料。
并且在當(dāng)前頁面包含了表格之外的標(biāo)題滓彰，菜單等其他元素控妻。
后天api請(qǐng)求都需要帶上token信息
前臺(tái)頁面跳轉(zhuǎn)到打印頁面后再跳回
1、通過緩存?zhèn)鬟f數(shù)據(jù)揭绑，
2弓候、路由跳轉(zhuǎn)到打印頁面，
3他匪、頁面獲取緩存數(shù)據(jù)菇存，
4、調(diào)用瀏覽器打印方法邦蜜，
5依鸥、操作完畢頁面后退一步
調(diào)用打印頁面
this.cach.setBylocal({key: key, value: data}); // 寫入緩存
this.router.navigate([url, key]); // 路由跳轉(zhuǎn)，緩存key值傳遞過去
打印頁面
ngAfterViewInit() {
const $qus = this.route.params.subscribe(q => {
const key = q.key;
if (key) {
this._data = this.cach.getBylocal(key) ;
this.cach.removeBylocal(key);
setTimeout(() => {
window.print();
history.go(-1);
}, '20');
}
});
}
效果
在打印頁面里自動(dòng)處理了分頁顯示等問題悼沈。測試一頁A4紙適合頁面840px-1225px
打印文件里會(huì)自動(dòng)添加頁面標(biāo)題和日期贱迟，下方會(huì)自動(dòng)添加頁面地址，不知道如何去掉
在后臺(tái)生成pdf頁面顯示自帶打印下載功能
1絮供、后臺(tái)生成PDF文件衣吠，返回二進(jìn)制流。
2壤靶、在不需要token信息的情況下缚俏，并且支持get請(qǐng)求的，可以在瀏覽器中直接打開該地址贮乳∮腔唬或者通過a標(biāo)簽來實(shí)現(xiàn)下載和頁面顯示。并實(shí)現(xiàn)打印功能向拆。
3亚茬、需要token驗(yàn)證的情況下，使用blob類型來接收數(shù)據(jù)浓恳，并創(chuàng)建一個(gè)本地地址供瀏覽器訪問刹缝，后面操作如第二步葡兑。
private down(url: string, body?: any) {
return this.http.post(url, body || null, {
responseType: 'blob'
})
}
private downLoad(url: string, type: string, body?: any, fileName?: string) {
return this.down(url, body).map(r => {
const blob = new Blob([r], {type: type});
const objectUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display:none');
a.setAttribute('href', objectUrl);
if (fileName) {
a.setAttribute('download', fileName);
} else {
a.setAttribute('target', '_blank');
}
a.click();
URL.revokeObjectURL(objectUrl);
return true;
});
}
/**
* 下載pdf， 如果不傳入文件名會(huì)再瀏覽器中打開 實(shí)現(xiàn)打印功能
* 傳入文件名會(huì)直接下載
* @param {string} url
* @param body
* @param {string} fileName
* @returns {Observable<boolean>}
*/
downLoadPdf(url: string, body?: any, fileName?: string) {
return this.downLoad(url, 'application/pdf', body, fileName);
}
效果
在iframe頁面里調(diào)用打印
這個(gè)方法可以結(jié)合前兩個(gè)方法使用赞草，把前兩個(gè)頁面放在在iframe頁面里。
略吆鹤。
