vue實(shí)現(xiàn)lodop打印功能的示例
更新時間：2020年11月11日 09:16:42 作者：親爸爸
這篇文章主要介紹了vue實(shí)現(xiàn)lodop打印功能的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
1.官網(wǎng)下載
http://www.lodop.net/download.html
2.解壓安裝運(yùn)行
3.vue部分實(shí)現(xiàn)
3.1將lodopDuncs.js文件放入工程中，具體操作可見：http://www.lodop.net/faq/pp35.html
3.2 編寫代碼
<template>
<div class="hello">
<button class="print-btn" v-on:click="btnClickPrint">
<span>{{ msg }}</span>
</button>
</div>
</template>
<script>
import { getLodop } from "../assets/LodopFuncs"; //導(dǎo)入模塊
export default {
name: "HelloWorld",
data() {
return {
msg: "點(diǎn)擊打印按鈕",
};
},
methods: {
// btnClickPrint: function () {
// let LODOP = getLodop(); //調(diào)用getLodop獲取LODOP對象
// LODOP.PRINT_INIT("");
// LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印內(nèi)容");
// LODOP.PREVIEW();
// },
btnClickPrint() {
let LODOP = getLodop(); //調(diào)用getLodop獲取LODOP對象
LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_整頁縮放打印輸出");
LODOP.ADD_PRINT_BARCODE(15, 15, 300, 300, "QRCode", "xxxxxxxxxxxxx");
LODOP.SET_PRINT_STYLEA(0, "Stretch", 1); //(可變形)擴(kuò)展縮放模式
LODOP.PREVIEW(); //預(yù)覽(預(yù)覽打印無腳標(biāo))
// LODOP.PRINT(); //打印
},
},
};
</script>
效果如下：
以上就是vue實(shí)現(xiàn)lodop打印功能的示例的詳細(xì)內(nèi)容，更多關(guān)于vue實(shí)現(xiàn)打印功能的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vuex刷新后數(shù)據(jù)丟失的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue的h5日歷組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法
這篇文章主要介紹了vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法,非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了通過npm或yarn自動生成vue組件的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本篇文章主要介紹了Vue中如何實(shí)現(xiàn)proxy代理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Vue實(shí)現(xiàn)項(xiàng)目部署到非根目錄及解決刷新頁面時找不到資源
這篇文章主要介紹了Vue實(shí)現(xiàn)項(xiàng)目部署到非根目錄及解決刷新頁面時找不到資源問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要給大家介紹了關(guān)于Vue入門的相關(guān)資料，是一篇超完整的Vue入門教程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue3+vite兼容低版本的白屏問題詳解(安卓7/ios11)
這篇文章主要給大家介紹了關(guān)于vue3+vite兼容低版本的白屏問題的相關(guān)資料,還給大家介紹了vue打包項(xiàng)目以后白屏和圖片加載不出來問題的解決方法,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue和React有哪些區(qū)別，幫助大家更好的理解和學(xué)習(xí)JavaScript框架，感興趣的朋友可以了解下2020-09-09