使用vue3-print-nb實現(xiàn)打印pdf分頁代碼示例

更新時間：2024年10月21日 11:44:56 作者：故事與九

這篇文章主要介紹了使用vue3-print-nb實現(xiàn)打印pdf分頁的相關(guān)資料,這種方法不僅適用于Vue3項目,也可以在其他前端框架中實現(xiàn)類似的打印分頁功能,需要的朋友可以參考下

安裝插件

npm install vue3-print-nb --save

vue3 引入

import print from 'vue3-print-nb' // 打印插件
app.use(print)

使用

這里使用的是對象配置方式

對象配置方式——在js中定義一個對象，對象中可配置打印區(qū)域相關(guān)屬性，在需要打印的單據(jù)內(nèi)容最外面的div設(shè)置唯一的id，id值為js對象中的id值，在打印彈框里的打印按鈕設(shè)置自定義屬性v-print，該屬性值為打印區(qū)域的對象

<a-button type="primary" @click="printing" v-print="printObj">打印</a-button>

const printObj = {
    id: "mypdf", // 這里是要打印元素的ID
    popTitle: "&nbsp", // 打印的標(biāo)題
    extraCss: "", // 打印可引入外部的一個 css 文件
    extraHead: "", // 打印頭部文字
    preview: false, // 是否啟動預(yù)覽模式，默認(rèn)是false
    previewTitle: '中銅國際貿(mào)易集團有限公司', // 打印預(yù)覽的標(biāo)題
    previewPrintBtnLabel: '預(yù)覽結(jié)束，開始打印', // 打印預(yù)覽的標(biāo)題下方的按鈕文本，點擊可進(jìn)入打印
    zIndex: 10002, // 預(yù)覽窗口的z-index，默認(rèn)是20002，最好比默認(rèn)值更高
    previewBeforeOpenCallback() {
        console.log('正在加載預(yù)覽窗口！')
    },
    previewOpenCallback() { console.log('已經(jīng)加載完預(yù)覽窗口，預(yù)覽打開了！') }, // 預(yù)覽窗口打開時的callback
    beforeOpenCallback() {
        console.log('開始打印之前！')
    }, // 開始打印之前的callback
    openCallback() {
        console.log('執(zhí)行打印了！')
    }, // 調(diào)用打印時的callback
    closeCallback() { console.log('關(guān)閉了打印工具！') }, // 關(guān)閉打印的callback(無法區(qū)分確認(rèn)or取消)
    clickMounted() {
        console.log('點擊v-print綁定的按鈕了')
    },
}

分頁分為倆種情況

第一種：打印單據(jù)有2個以上，打印時需要自動分頁打印，且每一頁內(nèi)容不超出一頁（固定的數(shù)據(jù)）

單據(jù)內(nèi)容的最外層的div設(shè)置樣式page-break-before:always，即可在打印時自動分頁

@media print {
    .section {
        page-break-before: always;
        /* 在每個部分之前始終開始新頁面 */
        // margin: 20px 0; /* 為了使打印頁面更清晰，可以添加一些上下間距 */
        margin-top: 0;
    }
}

第二種：打印單據(jù)有2個以上，打印時需要自動分頁打印，內(nèi)容連續(xù)且不固定，

如圖所示打印一行被截斷不滿足需求

自動分頁：有兩個高度需要區(qū)分，一個是html頁面的實際高度，和生成pdf的頁面高度，

當(dāng)內(nèi)容未超過pdf一頁顯示的范圍，無需分頁

通過class="paging"的容器進(jìn)行分割，考慮到每張A4紙高度固定，所以通過判斷每個class為paging的容器高度累加，大于紙張高度時，就給上一個class為paging的容器加上style=“page-break-pageBreakBefore:always”

// 動態(tài)計算 分頁
const PAGE_HEIGHT = 1100 // A4紙高度
const printing = () => {
    const splitDoms = document.getElementsByClassName('paging')
    console.log(splitDoms)
    let startY = 0 // 占用A4紙的高度，從每頁第一個poetry div的top值開始累加
    for (let i = 0; i < splitDoms.length; i++) {
        const splitDom = splitDoms[i]
        const splitValue = splitDom.getBoundingClientRect()
        console.log(splitDom.getBoundingClientRect())
        if (startY === 0) {
            startY = splitValue.top
        }
        const pageHeight = splitValue.bottom - startY
        // 當(dāng)加上當(dāng)前div的高度大于A4紙高度時，給前一個div加上分頁標(biāo)識
        if (pageHeight > PAGE_HEIGHT) {
            console.log(i)
            startY = 0
            if (i > 0) {
                splitDoms[i - 1].style.pageBreakBefore = 'always'; // 給前一個元素添加分頁符
            }
        }
    }
}

動態(tài)計算后的分頁展示

打印功能完整代碼(安裝好包，導(dǎo)入包后，可直接復(fù)制粘貼使用)

<template>
    <div>
        <a-button type="primary" style="margin-right: 10px;" @click="printing" v-print="printObj">打印</a-button>
        <!-- <a-button type="primary" style="margin-right: 10px;" @click="downPdf">下載PDF</a-button> -->
    </div>

    <div style="overflow-y: auto;padding: 20px;">
        <div class="main" id="mypdf">
            <div class="title fd">客商評價明細(xì)表</div>
            <div class="fd">
                供應(yīng)商名稱： <span>xxxxxxxxxxxxxxxxxxx</span> 編號:xxxxxxxxxxxxxxxxx
            </div>
            <table border="1" class="techniques" style="margin-top: 1px;width: 100%;">
                <tr>
                    <td style="width: 130px;text-align: center;">擬開展業(yè)務(wù)</td>
                    <td colspan="3">xxxxxxxxxxxxxxxxxxxxxx</td>
                    <td class="tec" :colspan="5">評價明細(xì)情況</td>
                </tr>
                <tr>
                    <!-- <td style="width: 130px;text-align: center;">因素</td> -->
                    <td style="width: 130px;text-align: center;">主要指標(biāo)</td>
                    <td style="width: 100px;text-align: center;">指標(biāo)類型</td>
                    <td style="width: 150px;">評分標(biāo)準(zhǔn)</td>
                    <td style="width: 100px" class="tec">標(biāo)準(zhǔn)分?jǐn)?shù)</td>
                    <td v-for="item in 5" class="tec">姓名{{ item }}</td>
                </tr>

                <tbody v-for="item in baseList" class="paging" style="height: 1px;">
                    <tr>
                        <!-- <td style="width: 130px;text-align: center;">{{ item.factor }}</td> -->
                        <td style="width: 130px;text-align: center;">{{ item.factor }}</td>
                        <td style="width: 100px;text-align: center;">否決項</td>
                        <td>{{ item.scoringcriteria }}</td>
                        <td style="width: 100px;text-align: center;">
                            <div style="display: flex;">
                                <div style="display: flex; align-items: center;">
                                    <div class="tag">
                                        <!-- <check-outlined class="tagIcon" /> -->
                                    </div>
                                    <div>是</div>
                                </div>
                                <div style="display: flex; align-items: center;">
                                    <div class="tag">
                                        <!-- <check-outlined class="tagIcon" /> -->
                                    </div>
                                    <div>否</div>
                                </div>
                            </div>
                        </td>
                        <td v-for="item in item.peo" class="tec">{{ item }}</td>
                    </tr>
                </tbody>

                <tbody v-for="item in orditemLsit" :key="item.id" class="paging">
                    <tr v-for="(val, index) in item.scoringcriteria" :key="val.id">
                        <td style="width: 130px;text-align: center;" v-if="index === 0"
                            :rowspan="item.scoringcriteria.length">
                            {{ item.factor }}
                        </td>
                        <td style="width: 100px;text-align: center;" v-if="index === 0"
                            :rowspan="item.scoringcriteria.length">
                            5
                        </td>
                        <td style="width: 130px;">{{ val.title }}</td>
                        <td style="width: 100px;" class="tec">{{ val.score }}</td>
                        <template v-for="items in 5">
                            <td class="tec" v-if="index === 0" :rowspan="item.scoringcriteria.length">{{ items }}</td>
                        </template>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script setup>

let baseList = [
    {
        factor: '公司及董監(jiān)高失信',
        mainindex: '公司及董監(jiān)高是否被列為失信執(zhí)行人員',
        score: '否決項',
        scoringcriteria: '公司及董監(jiān)高被列為失信執(zhí)行人員',
        standardScore: '',
        peo: 5
    },
    {
        factor: '成立年限',
        mainindex: '成立年限',
        score: '否決項',
        scoringcriteria: '公司成立年限小于3年',
        standardScore: '',
        peo: 5
    },
    {
        factor: '信用評價',
        mainindex: '第三方征信系統(tǒng)的評級',
        score: '否決項',
        scoringcriteria: '償債能力預(yù)警（對應(yīng)征信報告的第4級），如無第三方征信報告，則可從客商資產(chǎn)質(zhì)量、資產(chǎn)負(fù)債率、營運管理、競爭力情況等方面進(jìn)行綜合評價，如資產(chǎn)質(zhì)量較差，償債能力較差，或存在大量訴訟案件或最近2年有重大行政處罰記錄，需警惕',
        standardScore: '',
        peo: 5
    },
    {
        factor: '凈資產(chǎn)',
        mainindex: '最新年度或半年度凈資產(chǎn)',
        score: '否決項',
        scoringcriteria: '最新年度或半年度凈資產(chǎn)總額小于500萬元',
        standardScore: '',
        peo: 5
    },
    {
        factor: '業(yè)務(wù)范圍',
        mainindex: '業(yè)務(wù)范圍',
        score: '否決項',
        scoringcriteria: '有與公司同類自營貿(mào)易業(yè)務(wù)的民營企業(yè)',
        standardScore: '',
        peo: 5
    },
    {
        factor: '經(jīng)營性現(xiàn)金凈流量',
        mainindex: '經(jīng)營性現(xiàn)金凈流量',
        score: '否決項',
        scoringcriteria: '連續(xù)三年經(jīng)營性現(xiàn)金凈流量為負(fù)',
        standardScore: '',
        peo: 5
    },
    {
        factor: '所有者權(quán)益與實收資本關(guān)系',
        mainindex: '所有者權(quán)益與實收資本關(guān)系',
        score: '否決項',
        scoringcriteria: '所有者權(quán)益總額連續(xù)三年小于實收資本金額',
        standardScore: '',
        peo: 5
    },
    {
        factor: '境內(nèi)供應(yīng)商未提供最近三年審計報告',
        mainindex: '境內(nèi)供應(yīng)商未提供最近三年審計報告',
        score: '否決項',
        scoringcriteria: '境內(nèi)供應(yīng)商未提供最近三年審計報告',
        standardScore: '',
        peo: 5
    },
]


let orditemLsit = [
    {
        factor: '成立年限',
        score: '5',
        scoringcriteria: [
            {
                title: '成立年限5年（含）以上',
                score: '5'
            },
            {
                title: '成立年限3年（含）至5年',
                score: '3'
            },
            {
                title: '成立年限3年（不含）以下',
                score: '1'
            },
        ],
        standardScore: '',
        peo: 5
    },
    {
        factor: '實繳注冊資本金',
        score: '5',
        scoringcriteria: [
            {
                title: '8000萬元（含） 以上    ',
                score: '5'
            },
            {
                title: '4000萬元（含） 至8000萬元 ',
                score: '4'
            },
            {
                title: '1000萬元（含） 至4000萬元      ',
                score: '3'
            },
            {
                title: '1000萬元（不含）以下至4000萬元      ',
                score: '1'
            },
        ],
        standardScore: '',
        peo: 5
    },
    {
        factor: '企業(yè)性質(zhì)',
        score: '5',
        scoringcriteria: [
            {
                title: '國有A股上市，央企三級以上公司    以上    ',
                score: '5'
            },
            {
                title: '上市公司，省屬大型國企',
                score: '4'
            },
            {
                title: '國有非上市',
                score: '3'
            },
            {
                title: '其它（非國企、非上市）',
                score: '1'
            },
        ],
        standardScore: '',
        peo: 5
    },
    {
        factor: '企業(yè)性質(zhì)',
        score: '5',
        scoringcriteria: [
            {
                title: '國有A股上市，央企三級以上公司    以上    ',
                score: '5'
            },
            {
                title: '上市公司，省屬大型國企',
                score: '4'
            },
            {
                title: '國有非上市',
                score: '3'
            },
            {
                title: '其它（非國企、非上市）',
                score: '1'
            },
        ],
        standardScore: '',
        peo: 5
    },
    {
        factor: '企業(yè)性質(zhì)',
        score: '5',
        scoringcriteria: [
            {
                title: '國有A股上市，央企三級以上公司    以上    ',
                score: '5'
            },
            {
                title: '上市公司，省屬大型國企',
                score: '4'
            },
            {
                title: '國有非上市',
                score: '3'
            },
            {
                title: '其它（非國企、非上市）',
                score: '1'
            },
        ],
        standardScore: '',
        peo: 5
    },
]


const printObj = {
    id: "mypdf", // 這里是要打印元素的ID
    popTitle: "&nbsp", // 打印的標(biāo)題
    extraCss: "", // 打印可引入外部的一個 css 文件
    extraHead: "", // 打印頭部文字
    preview: false, // 是否啟動預(yù)覽模式，默認(rèn)是false
    previewTitle: '中銅國際貿(mào)易集團有限公司', // 打印預(yù)覽的標(biāo)題
    previewPrintBtnLabel: '預(yù)覽結(jié)束，開始打印', // 打印預(yù)覽的標(biāo)題下方的按鈕文本，點擊可進(jìn)入打印
    zIndex: 10002, // 預(yù)覽窗口的z-index，默認(rèn)是20002，最好比默認(rèn)值更高
    previewBeforeOpenCallback() {
        console.log('正在加載預(yù)覽窗口！')
    },
    previewOpenCallback() { console.log('已經(jīng)加載完預(yù)覽窗口，預(yù)覽打開了！') }, // 預(yù)覽窗口打開時的callback
    beforeOpenCallback() {
        console.log('開始打印之前！')
    }, // 開始打印之前的callback
    openCallback() {
        console.log('執(zhí)行打印了！')
    }, // 調(diào)用打印時的callback
    closeCallback() { console.log('關(guān)閉了打印工具！') }, // 關(guān)閉打印的callback(無法區(qū)分確認(rèn)or取消)
    clickMounted() {
        console.log('點擊v-print綁定的按鈕了')
    },
}

const PAGE_HEIGHT = 1100 // A4紙高度
const printing = () => {
    const splitDoms = document.getElementsByClassName('paging')
    console.log(splitDoms)
    let startY = 0 // 占用A4紙的高度，從每頁第一個poetry div的top值開始累加
    for (let i = 0; i < splitDoms.length; i++) {
        const splitDom = splitDoms[i]
        const splitValue = splitDom.getBoundingClientRect()
        console.log(splitDom.getBoundingClientRect())
        if (startY === 0) {
            startY = splitValue.top
        }
        const pageHeight = splitValue.bottom - startY
        // 當(dāng)加上當(dāng)前div的高度大于A4紙高度時，給前一個div加上分頁標(biāo)識
        if (pageHeight > PAGE_HEIGHT) {
            console.log(i)
            startY = 0
            if (i > 0) {
                splitDoms[i - 1].style.pageBreakBefore = 'always'; // 給前一個元素添加分頁符
            }
        }
    }
}

</script>

<style lang="scss" scoped>
.main {
    width: 900px;
    margin: 0 auto;
}

.title {
    font-size: 19px;
    margin-bottom: 10px;
    line-height: 33px;
    text-align: center;
}

.techniques {
    width: 100%;
    border-color: #000;
    font-family: "宋體", "SimSun", sans-serif;
}

.techniques,
.techniques th,
.techniques td {
    border-collapse: collapse;
    line-height: 22px;
    font-size: 13px
}



.fd {
    font-weight: bold;
}

.tec {
    text-align: center;
}

.tag {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    text-align: center;
    color: #fff;
    border: 1px solid #333;
    font-weight: 700;
    // margin-left: 10px;
    // margin-right: -10px;
    margin: 0 5px;
    position: relative;

    .tagIcon {
        position: absolute;
        font-size: 12px;
        top: 1px;
        left: -20px;
        z-index: 111;
        color: #000;
    }
}

@page {
    size: auto A4 landscape;
    margin-top: 20mm;
}

@media print {
    .section {
        page-break-before: always;
        /* 在每個部分之前始終開始新頁面 */
        // margin: 20px 0; /* 為了使打印頁面更清晰，可以添加一些上下間距 */
        margin-top: 0;
    }
}
</style>