vue 使用print-js 打印渲染不出來問題
使用print-js 打印渲染不出來
vue 使用print-js 打印渲染不出來, 實際數(shù)據(jù)已經(jīng)加載出來了。
遇到這問題,解決方向
1、是否是數(shù)據(jù)未賦值上
2、打印加載js是否渲染上
所以:在vue中可以使用id的形式和ref的形式進(jìn)行綁定,如果id綁定渲染不成功的話可以嘗試
<div id="printDiv" ?ref="printDiv"/> this.$refs.printDiv print({ ? ? printable: this.$refs.printDiv, ? ? type: 'html', ? ? scanStyles: false })
vue中printjs使用指南
使用攻略
參考文檔:https://printjs.crabbly.com/
分頁:使用css的 page-break-after:always 來控制在某個DIV之后新開一個頁面
<div style="page-break-after:always">我是封面</div> <div style="page-break-after:always">我是目錄,你不知道我的內(nèi)容有多長</div> <div>我是正文,我需要從一個新頁面開始展示</div>
標(biāo)題欄每頁重復(fù)打?。阂驗榇蛴r,表格中的thead和tfoot默認(rèn)會在每一頁重復(fù)打印,所以只要設(shè)置好表格結(jié)構(gòu)就行。
html打印
<div id="printJS-table"> <table class="printTable" style="width: 100%; text-align: center" border="0"> <thead> <tr class="maintitle"> <td :colspan="columns.length"> <span style="font-size: 20px">{{ modelRef.hospitalName }} 標(biāo)本陽性率報表</span> </td> </tr> <tr class="subtitle"> <td :colspan="2"> 統(tǒng)計時間:{{ modelRef.inlineForm.timeSpan[0].format('YYYY/MM/DD') }}-{{ modelRef.inlineForm.timeSpan[1].format('YYYY/MM/DD') }} </td> <td :colspan="columns.length - 4">制表人:{{ modelRef.username }}</td> <td :colspan="2">打印時間:{{ moment().format('YYYY/MM/DD') }}</td> </tr> <tr class="header"> <th v-for="item in columns" width="">{{ item.title }}</th> </tr> </thead> <tbody> <tr v-for="(row, index) in printDatalist" :class="{ strongRow: row.sampletype == '合計' }" > <td :class="{ lastRow: printDatalist.length == index + 1 }" v-for="column in columns" > {{ row[column.dataIndex] }} </td> </tr> </tbody> </table> </div>
const handlePrint1 = () => { printJS({ printable: 'printJS-table', type: 'html', // targetStyles: ['*'], // headerStyle: 'font-size:20px', style: ` @page { margin: 0.5cm; margin-right: 0.5cm; margin-top: 0.5cm; margin-bottom: 0.3cm; padding-bottom: 0px;} .printTable thead .maintitle { text-align: center; font-size: 20px; } .printTable thead .subtitle { text-align: center; font-size: 13px; } .printTable thead .header th { border-top: 1px solid #000; border-right: 1px solid #000; } .printTable thead .header th:nth-child(1) { border-left: 1px solid #000; } tbody td { border: 1px solid #000; } .printTable tbody .strongRow { font-weight: bold; } tbody { text-align: center; } table { border-collapse: collapse; } `, }); };
以json格式打印
const handlePrint = () => { let printColumns = columns.value.map((ele: any) => { return { field: ele.dataIndex, displayName: ele.title, }; }); printJS({ printable: dataSource.value, maxWidth: 2500, properties: printColumns, header: ` <div class="titleDiv"> <div class="title">${modelRef.hospitalName} 標(biāo)本陽性率報表</div> <div class="subtitle"> <div class="label"> 統(tǒng)計時間:${modelRef.inlineForm.timeSpan[0].format( 'YYYY/MM/DD', )}-${modelRef.inlineForm.timeSpan[1].format('YYYY/MM/DD')} </div> <div class="label">制表人:${modelRef.username}</div> <div class="label">打印時間:${moment().format('YYYY/MM/DD')} </div> </div> </div> `, //size: landscape; style: `@page { margin: 0.5cm; margin-right: 0.5cm; margin-top: 0.5cm; margin-bottom: 0.3cm; padding-bottom: 0px; } .title { margin-top: 10px; font-size: 20px; text-align: center; padding:10px; } .subtitle { display: flex; justify-content: space-between; font-size: 16px; padding:10px; } .subtitle .label { flex: 1; font-size: 14px; } .subtitle .label:nth-child(2) { text-align: center; } .subtitle .label:nth-child(3) { text-align: right; } `, gridStyle: 'text-align: center; border: 1px solid black;', gridHeaderStyle: 'border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black; border-bottom: 0px;', type: 'json', }); };
參數(shù)
參數(shù) | 默認(rèn)值 | 說明 |
---|---|---|
printable | null | 文檔源:pdf 或圖像 url、html 元素 id 或 json 數(shù)據(jù)對象。 |
type | ‘pdf’ | |
header | null | 用于 HTML、圖像或 JSON 打印的可選標(biāo)頭。它將放置在頁面頂部。此屬性將接受文本或原始 HTML。 |
headerStyle | ‘font-weight: 300;’ | 要應(yīng)用于頁眉文本的可選頁眉樣式。 |
maxWidth | 800 | 最大文檔寬度(以像素為單位)。根據(jù)需要更改此設(shè)置。在打印 HTML、圖像或 JSON 時使用。 |
css | null | 這允許我們傳遞一個或多個應(yīng)應(yīng)用于正在打印的html的css文件URL。值可以是具有單個 URL 的字符串,也可以是具有多個 URL 的數(shù)組。 |
style | null | 這允許我們傳遞一個具有自定義樣式的字符串,該字符串應(yīng)應(yīng)用于正在打印的html。 |
scanStyles | true | 設(shè)置為 false 時,庫將不會處理應(yīng)用于正在打印的 html 的樣式。使用參數(shù)css時很有用。 |
targetStyle | null | 默認(rèn)情況下,在打印 HTML 元素時,庫僅處理某些樣式。此選項允許您傳遞要處理的樣式數(shù)組。例如:[‘padding-top’, ‘border-bottom’] |
targetStyles | null | 但是,與"targetStyle"相同,這將處理任何一系列樣式。例如:[‘border’, ‘padding’],將包括’border-bottom’, ‘border-top’, ‘border-left’, ‘border-right’, 'padding-top’等。 |
您還可以傳遞 [‘*’] 來處理所有樣式。 | ||
ignoreElements | [] | 接受在打印父 html 元素時應(yīng)忽略的 html ID 數(shù)組。 |
properties | null | 在打印 JSON 時使用。這些是對象屬性名稱。 |
gridHeaderStyle | ‘font-weight: bold;’ | 打印 JSON 數(shù)據(jù)時網(wǎng)格標(biāo)頭的可選樣式。 |
gridStyle | ‘border: 1px solid lightgray; margin-bottom: -1px;’ | 打印 JSON 數(shù)據(jù)時網(wǎng)格行的可選樣式。 |
repeatTableHeader | true | 打印JSON數(shù)據(jù)時使用。當(dāng)設(shè)置為false時,數(shù)據(jù)表頭將只顯示在第一頁。 |
showModal | null | 啟用此選項可在檢索或處理大型 PDF 文件時顯示用戶反饋。 |
modalMessage | ‘Retrieving Document…’ | showModal設(shè)置為true時,向用戶顯示的消息。 |
onLoadingStart | null | 加載 PDF 時要執(zhí)行的功能 |
onLoadingEnd | null | 加載 PDF 后要執(zhí)行的功能 |
documentTitle | ‘Document’ | 打印 html、圖像或 json 時,這將顯示為文檔標(biāo)題。 |
fallbackPrintable | null | 打印 pdf 時,如果瀏覽器不兼容(檢查瀏覽器兼容性表),庫將在新選項卡中打開 pdf。這允許您傳遞要打開的不同pdf文檔,而不是在"可打印"中傳遞的原始文檔。如果您在備用pdf文件中注入javascript,這可能很有用。 |
onPdfOpen | null | 打印 pdf 時,如果瀏覽器不兼容(檢查瀏覽器兼容性表),庫將在新選項卡中打開 pdf??梢栽诖颂巶鬟f回調(diào)函數(shù),該函數(shù)將在發(fā)生這種情況時執(zhí)行。在某些情況下,如果要處理打印流、更新用戶界面等,它可能很有用。 |
onPrintDialogClose | null | 在瀏覽器打印對話框關(guān)閉后執(zhí)行的回調(diào)函數(shù)。 |
onError | error => throw error | 發(fā)生錯誤時要執(zhí)行的回調(diào)函數(shù)。 |
base64 | false | 在打印作為 base64 數(shù)據(jù)傳遞的 PDF 文檔時使用。 |
honorMarginPadding (已棄用) | true | 這用于保留或刪除正在打印的元素中的填充和邊距。有時這些樣式設(shè)置在屏幕上很棒,但在打印時看起來很糟糕。您可以通過將其設(shè)置為 false 來將其刪除。 |
honorColor (已棄用) | false | 若要以彩色打印文本,請將此屬性設(shè)置為 true。默認(rèn)情況下,所有文本都將以黑色打印。 |
font(已棄用) | ‘TimesNewRoman’ | 打印 HTML 或 JSON 時使用的字體。 |
font_size (已棄用) | ‘12pt’ | 打印 HTML 或 JSON 時使用的字體大小。 |
imageStyle(已棄用) | ‘width:100%;’ | 打印圖像時使用。接受具有要應(yīng)用于每個圖像的自定義樣式的字符串。 |
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue組件屬性(props)及私有數(shù)據(jù)data解析
這篇文章主要介紹了vue組件屬性(props)及私有數(shù)據(jù)data解析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue-simple-verify實現(xiàn)滑動驗證碼功能
登錄頁面經(jīng)常會需要滑動驗證碼的情況,使用vue插件vue-simple-verify就可以輕松實現(xiàn),下面小編給大家分享vue-simple-verify實現(xiàn)滑動驗證碼功能,感興趣的朋友一起看看吧2024-06-06vue post application/x-www-form-urlencoded如何實現(xiàn)傳參
這篇文章主要介紹了vue post application/x-www-form-urlencoded如何實現(xiàn)傳參問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04Vue如何獲取new Date().getTime()時間戳
在Web開發(fā)中,前端使用Vue.js獲取的是毫秒級時間戳,而PHP后端則是秒級時間戳,處理此類問題時,需要將PHP的時間戳乘以1000轉(zhuǎn)換為毫秒級,以保證數(shù)據(jù)的一致性和正確的邏輯判斷2024-10-10