vue實(shí)現(xiàn)lodop打印功能的示例

更新時(shí)間：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對(duì)象
  //  LODOP.PRINT_INIT("");
  //  LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印內(nèi)容");
  //  LODOP.PREVIEW();
  // },
  btnClickPrint() {
   let LODOP = getLodop(); //調(diào)用getLodop獲取LODOP對(duì)象
   LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_整頁(yè)縮放打印輸出");
   LODOP.ADD_PRINT_BARCODE(15, 15, 300, 300, "QRCode", "xxxxxxxxxxxxx");
   LODOP.SET_PRINT_STYLEA(0, "Stretch", 1); //(可變形)擴(kuò)展縮放模式
   LODOP.PREVIEW(); //預(yù)覽(預(yù)覽打印無(wú)腳標(biāo))
   // LODOP.PRINT(); //打印
  },
 },
};
</script>

效果如下：

以上就是vue實(shí)現(xiàn)lodop打印功能的示例的詳細(xì)內(nèi)容，更多關(guān)于vue實(shí)現(xiàn)打印功能的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vuex刷新后數(shù)據(jù)丟失的解決方法
這篇文章主要給大家介紹了關(guān)于vuex刷新后數(shù)據(jù)丟失的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
vue的h5日歷組件實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了vue的h5日歷組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法
這篇文章主要介紹了vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-10-10
通過(guò)npm或yarn自動(dòng)生成vue組件的方法示例
這篇文章主要介紹了通過(guò)npm或yarn自動(dòng)生成vue組件的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
Vue中如何實(shí)現(xiàn)proxy代理
本篇文章主要介紹了Vue中如何實(shí)現(xiàn)proxy代理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
Vue實(shí)現(xiàn)項(xiàng)目部署到非根目錄及解決刷新頁(yè)面時(shí)找不到資源
這篇文章主要介紹了Vue實(shí)現(xiàn)項(xiàng)目部署到非根目錄及解決刷新頁(yè)面時(shí)找不到資源問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue日歷/日程提醒/html5本地緩存功能
這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-09-09
一篇超完整的Vue新手入門指導(dǎo)教程
這篇文章主要給大家介紹了關(guān)于Vue入門的相關(guān)資料，是一篇超完整的Vue入門教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
vue3+vite兼容低版本的白屏問(wèn)題詳解(安卓7/ios11)
這篇文章主要給大家介紹了關(guān)于vue3+vite兼容低版本的白屏問(wèn)題的相關(guān)資料,還給大家介紹了vue打包項(xiàng)目以后白屏和圖片加載不出來(lái)問(wèn)題的解決方法,需要的朋友可以參考下
2022-12-12
Vue和React有哪些區(qū)別
這篇文章主要介紹了Vue和React有哪些區(qū)別，幫助大家更好的理解和學(xué)習(xí)JavaScript框架，感興趣的朋友可以了解下
2020-09-09