【hiprint】hiprint的使用方法（附使用案例）hiprint 表格數(shù)據(jù)傳輸問題解決辦法

hncdman 2023-02-28 發(fā)布于湖南

展開全文

hiprint打印table數(shù)據(jù)無法綁定解決辦法

事件起因：

問題描述：

hiprint使用教學(xué)：

hiprint案例(附下載地址)：

hiprint的依賴導(dǎo)入

案例代碼解釋：

事件起因：

因為前兩天要弄一個a4紙的打印功能（嵌入在網(wǎng)頁里面），結(jié)果前兩天因為弄這個搞得挺惱火的，到筆者終于解決了這個問題后，特此來說明一下這個問題，以便后來者能夠吸取經(jīng)驗教訓(xùn)

問題描述：

我所創(chuàng)建的一個空的vue項目，后面在這個里面加入hiprint進行數(shù)據(jù)的打印

整個項目的結(jié)構(gòu)：

我因為寫的一個簡單的數(shù)據(jù)表無法進行table表的數(shù)據(jù)綁定導(dǎo)致我花費了過多的時間進行查找問題，在網(wǎng)上查找的過程中也沒有找到有效的案例

所以我提供了一個案例來展示給大家下載，方便大家進行對應(yīng)的操作（在下面的案例板塊）

如下圖所示無法將對應(yīng)的綁定的數(shù)據(jù)在打印單中進行顯示

hiprint使用教學(xué)：

首先去到它的官網(wǎng)：hiprint的官網(wǎng)：http:///demo

官網(wǎng)這個樣子：

將模板清空，自定義設(shè)計模板

將對應(yīng)的模塊拖入編輯界面，需要注意字段的綁定,每一個組件都要綁定對應(yīng)的字段名

注意表格單列的綁定

編輯好后它會自己隱藏對應(yīng)列的綁定字段名稱:

將設(shè)計好的模板轉(zhuǎn)換為對應(yīng)的json串，以便復(fù)制到項目中的代碼中去

hiprint案例(附下載地址)：

樣例項目 https://download.csdn.net/download/chirp_CQ/62427678

hiprint需要的css和js依賴:

https://download.csdn.net/download/chirp_CQ/62429133

這下面是筆者自己寫的一個模板然后將它導(dǎo)入到了一個全新的vue項目中（使用的是npm ui剛創(chuàng)建的vue項目，屬于一個全新的vue項目），注意要發(fā)揮它的功能就需要相應(yīng)的依賴包導(dǎo)入，建議自己學(xué)習(xí)導(dǎo)一下這些東西，在上面的樣例項目下載中是已經(jīng)導(dǎo)入好了相應(yīng)的hiprint的css和js的，但建議大家自己導(dǎo)入一下

hiprint的依賴導(dǎo)入

具體導(dǎo)入過程如下：

首先：一個全新的vue項目的目錄結(jié)構(gòu)大致是這樣的：

將上面的hiprint的css和js下載下來，然后將整個文件夾放在上面這個目錄下的public目錄下

像這樣：

然后打開public目錄下的index.html 將hiprint里面的css和js導(dǎo)入進來：

到這兒就已經(jīng)完成了一大半了

然后就是在app.vue中編寫內(nèi)容（這只是為了方便不怎么會vue的同學(xué)，以及會了的，可以去自己創(chuàng)建單獨的vue文件，然后設(shè)置路由自己去實現(xiàn)跳轉(zhuǎn)）

在上面的樣例的 app.vue中的內(nèi)容（能夠?qū)⒔壎ǖ臄?shù)據(jù)在打印單中進行顯示）：

</div>

</template>

export default {

name: "app",

data() {

return {

mypanel: {

panels: [

{

index: 0,

paperType:'A4',

height: 297,

width: 210,

paperHeader: 49.5,

paperFooter: 780,

printElements: [

{

options: {

left: 250.5,

top: 19.5,

height: 9.75,

width: 120,

title: "",

field: "title",

fontSize: 21,

printElementType: { type: "text" },

{

options: {

left: 21,

top: 87,

height: 36,

width: 550,

field:'table1',

columns: [

[

{

title: "序號",

field: "order",

width: 63.16925398270368,

colspan: 1,

rowspan: 1,

align: 'center',

checked: true,

{

title: "資產(chǎn)編號",

field: "assetcode",

width: 135.06367330450615,

colspan: 1,

rowspan: 1,

align: 'center',

checked: true,

{

title: "資產(chǎn)名稱",

field: "assetname",

width: 150.33805496131086,

colspan: 1,

rowspan: 1,

align: 'center',

checked: true,

{

title: "型號",

field: "type",

width: 116.81363313609468,

colspan: 1,

rowspan: 1,

align: 'center',

checked: true,

{

title: "數(shù)量",

field: "num",

width: 84.61538461538461,

colspan: 1,

rowspan: 1,

align: 'center',

checked: true,

]

printElementType: { title: "表格", type: "tableCustom" },

{

options: { left: -3, top: 66, height: 9, width: 597 },

printElementType: { type: "hline" },

{

options: {

left: 33,

top: 49.5,

height: 16.5,

width: 120,

title: "領(lǐng)用部門",

field: "apartment",

fontSize: 12,

printElementType: { type: "text" },

{

options: {

left: 246,

top: 49.5,

height: 16.5,

width: 120,

title: "領(lǐng)用人",

field: "userperson",

fontSize: 12,

printElementType: { type: "text" },

{

options: {

left: 450,

top: 49.5,

height: 16.5,

width: 120,

title: "領(lǐng)用時間",

field: "getTime",

fontSize: 12,

printElementType: { type: "text" },

{

options: {

left: 96,

top: 763.5,

height: 9.75,

width: 120,

title: "領(lǐng)用人簽字：",

fontSize: 12,

printElementType: { type: "text" },

{

options: {

left: 361.5,

top: 763.5,

height: 9.75,

width: 150,

title: "打印時間",

field: "printTime",

fontSize: 12,

printElementType: { type: "text" },

paperNumberLeft: 565.5,

paperNumberTop: 819,

]

data: [

{

order: 1,

assetcode: "ZC123152131",

assetname: "test_name",

type: "1",

num: "2",

{

order: 2,

assetcode: "ZC123152131",

assetname: "test_name",

type: "1",

num: "2",

]

}

mounted() {},

methods: {

printTest() {

let printData = {

title: "資產(chǎn)領(lǐng)用單",

apartment: "產(chǎn)品部",

userperson: "測試使用人1",

getTime: "2021.11.01",

printTime: "",

table1:this.data

}

// 打印模板的json

//獲取系統(tǒng)時間進行打印

let getDate = new Date();

printData.printTime = getDate.getFullYear()+'.'+getDate.getMonth()+'.'+getDate.getDay()+' ';

hiprint.init();

//調(diào)用接口獲取數(shù)據(jù)

var hiprintTemplate = new hiprint.PrintTemplate({

template: this.mypanel,

settingContainer: "#templateDesignDiv",

});

hiprintTemplate.print([printData]);

};

</script>

<style>

</style>

案例代碼解釋：

注意數(shù)據(jù)綁定的內(nèi)容：

數(shù)據(jù)綁定的內(nèi)容解釋：

在panels的打印模板中，進行的數(shù)據(jù)綁定與上圖中printData中的數(shù)據(jù)字段名稱進行綁定：

然后在終端執(zhí)行 npm run serve，打開網(wǎng)頁

打開頁面，頁面只有一個按鈕：

點擊打印按鈕后：

至此，hiprint的基本的數(shù)據(jù)綁定和使用的小案例就到此結(jié)束了，謝謝

————————————————

版權(quán)聲明：本文為CSDN博主「阿，蔥來了-C is coming」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/chirp_CQ/article/details/121859785

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻花（0） +1

來自： hncdman > 《hiprint》

舉報/認領(lǐng)

0條評論

發(fā)表

請遵守用戶評論公約

類似文章 更多

hncdman

關(guān)注對話

TA的最新館藏

checkbox點擊事件，在IE和谷歌瀏覽器顯示不同的結(jié)果
JBOLT監(jiān)控彈出窗的鍵盤內(nèi)容
jquery檢測鍵盤或鼠標是否有活動
mysql超大數(shù)據(jù)恢復(fù)
MySQL5.7 2006:MySQL server has gone away解決辦法
mysqldump導(dǎo)出的數(shù)據(jù)，navicat無法恢復(fù)的處理

喜歡該文的人也喜歡更多

熱門閱讀換一換

小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

【hiprint】hiprint的使用方法（附使用案例）hiprint 表格數(shù)據(jù)傳輸問題解決辦法