vue實現(xiàn)lodop打印功能的示例
更新時間：2020年11月11日 09:16:42 作者：親爸爸
這篇文章主要介紹了vue實現(xiàn)lodop打印功能的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
1.官網(wǎng)下載
http://www.lodop.net/download.html
2.解壓安裝運行
3.vue部分實現(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"; //導入模塊
export default {
name: "HelloWorld",
data() {
return {
msg: "點擊打印按鈕",
};
},
methods: {
// btnClickPrint: function () {
// let LODOP = getLodop(); //調用getLodop獲取LODOP對象
// LODOP.PRINT_INIT("");
// LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印內容");
// LODOP.PREVIEW();
// },
btnClickPrint() {
let LODOP = getLodop(); //調用getLodop獲取LODOP對象
LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_整頁縮放打印輸出");
LODOP.ADD_PRINT_BARCODE(15, 15, 300, 300, "QRCode", "xxxxxxxxxxxxx");
LODOP.SET_PRINT_STYLEA(0, "Stretch", 1); //(可變形)擴展縮放模式
LODOP.PREVIEW(); //預覽(預覽打印無腳標)
// LODOP.PRINT(); //打印
},
},
};
</script>
效果如下：
以上就是vue實現(xiàn)lodop打印功能的示例的詳細內容，更多關于vue實現(xiàn)打印功能的資料請關注腳本之家其它相關文章！
相關文章
Vue+ElementUI table實現(xiàn)表格分頁
這篇文章主要為大家詳細介紹了Vue+ElementUI table實現(xiàn)表格分頁，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
在項目中很多時候需要用到vue打包成html不需要放在服務器上就能瀏覽,根據(jù)官網(wǎng)打包出來的html直接打開是顯示空白,下面這篇文章主要給大家介紹了關于vue打包后出現(xiàn)空白頁的原因及解決方式的相關資料,需要的朋友可以參考下2022-07-07
Vuex進行Echarts數(shù)據(jù)頁面初始化后如何更新dom
這篇文章主要為大家詳細介紹了使用Vuex做Echarts數(shù)據(jù)時,當頁面初始化后如何更新dom,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下2023-11-11
Vue中的Mind-Map通常是指使用Vue.js這個前端框架構建的思維導圖組件或庫,它可以幫助開發(fā)者在Web應用中創(chuàng)建動態(tài)、交互式的思維導圖,讓用戶可以直觀地組織信息和結構化數(shù)據(jù),本文介紹了Vue使用mind-map實現(xiàn)在線思維導圖,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了解決VUE-Router 同一頁面第二次進入不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue使用pinia管理數(shù)據(jù)pinia持久化存儲問題
這篇文章主要介紹了Vue使用pinia管理數(shù)據(jù)pinia持久化存儲問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了Vue組件開發(fā)初探，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
Vue?先初始化父組件再初始化子組件的方法(自定義父子組件mounted執(zhí)行順序)
這篇文章主要介紹了Vue?先初始化父組件再初始化子組件的方法（自定義父子組件mounted執(zhí)行順序）,本篇內容內容主要講述了,在使用?Konva?進行開發(fā)過程中遇到的一些問題,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue中$emit的用法詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
詳解vue2.0 transition 多個元素嵌套使用過渡
這篇文章主要介紹了詳解vue2.0 transition 多個元素嵌套使用過渡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06