快捷導(dǎo)航

Vue使用lodop實現(xiàn)打印小結(jié)

更新時間：2019年07月06日 16:32:44 作者：夭夭愛學(xué)習(xí)

這篇文章主要介紹了Vue使用lodop打印小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一. Lodop與C-Lodop的區(qū)別

Lodop打印控件是瀏覽器插件，與瀏覽器緊密結(jié)合來實現(xiàn)本地打印，是一種內(nèi)嵌到瀏覽器里交互方式。（適用瀏覽器：ie系列、火狐51版及歷史版本、谷歌44版及歷史版本。（新版火狐及谷歌不再支持np插件，也不能使用lodop））

C-Lodop打印服務(wù)是以提供服務(wù)方式解決web打印，擺脫了對瀏覽器的依賴，解決了新版谷歌（45版及后續(xù)版本）、64位火狐、edge等瀏覽器不再支持Lodop插件方式的情況，C-Lodop打印服務(wù)支持所有瀏覽器。

既然C-Lodop可以替代Lodop并且支持所有瀏覽器，實際開發(fā)過程中可以直接使用C-Lodop進(jìn)行完成打印需求

二.vue中使用Lodop

1 把官方提供的LodopFuncs.js文件保存到某個目錄下，如myProject\src\assets\LodopFuncs.js

2 修改LodopFuncs.js文件, 在文件最底部添加一行代碼 export { getLodop }; //導(dǎo)出getLodop

3 在打印事件處理函數(shù)所在文件里 import 該 module 在打印事件函數(shù)中調(diào)用getLodop獲取LODOP對象變量，按照官方教程書寫自己的打印函數(shù)，通過 PRINT、PREVIEW、PRINT_DESIGN進(jìn)行輸出。

三.實例代碼

1. LodopFuncs.js由于選擇了C-Lodop打印服務(wù)，也就不再需要進(jìn)行對各瀏覽器進(jìn)行判斷了，也不再需要各種提示下載哪個版本的控件了

改寫后的lodopFuncs.js如下圖所示，項目需求中引入了element的組件，提醒用戶點擊確認(rèn)后下載打印控件（win32NT.exe既支持32位也支持64位的系統(tǒng)，也就不用對用戶操作系統(tǒng)進(jìn)行判斷了直接下載安裝后刷新頁面使用就好）

2. template模板代碼

小提示：注意id放置位置，引用的是documnet.getElmentById('tableId').innerHTML

示例：進(jìn)行g(shù)etLodop的引用 import getLodop from '你的LodopFuncs.js 的路徑'

打印報表的方法進(jìn)行代碼編寫，主要程序就三行代碼 let LODOP = getLodop()//調(diào)用getLodop獲取LODOP對象

 LODOP.PRINT_INIT("")

 LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印內(nèi)容")

 LODOP.PREVIEW()

但實際項目需求中，需要對用戶進(jìn)行判斷，判斷用戶是否已安裝打印服務(wù)，如果沒有安裝要提示用戶下載安裝，已安裝好可以提示直接安裝

打印的樣式根據(jù)項目的需求也會有不同，有的是打印表格，有的是文本有的是圖片，用戶根據(jù)官方文檔操作寫樣式，字體大小，橫豎版設(shè)置等等

四.附源碼

import { MessageBox } from 'element-ui'

// ====頁面動態(tài)加載C-Lodop云打印必須的文件CLodopfuncs.js====
var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
var oscript = document.createElement('script')
// 讓本機的瀏覽器打印(更優(yōu)先一點)：
oscript = document.createElement('script')
oscript.src = 'http://localhost:8000/CLodopfuncs.js?priority=2'
head.insertBefore(oscript, head.firstChild)
// 加載雙端口(8000和18000）避免其中某個端口被占用：
oscript = document.createElement('script')
oscript.src = 'http://localhost:18000/CLodopfuncs.js?priority=1'
head.insertBefore(oscript, head.firstChild)

// 下載loadLodop
function loadLodop() {
 window.open('../../static/Lodop/CLodop_Setup_for_Win32NT.exe')
}

// ====獲取LODOP對象的主過程：====
function getLodop() {
 var LODOP
 try {
 LODOP = getCLodop()
 if (!LODOP && document.readyState !== 'complete') {
  MessageBox.alert('C-Lodop打印控件還沒準(zhǔn)備好，請稍后再試！')
  return
 }
 return LODOP
 } catch (err) {
 MessageBox({
  title: '溫馨提示',
  type: 'warning',
  showCancelButton: true,
  message: '您還未安裝打印控件，點擊確定下載打印控件，安裝成功后刷新頁面即可進(jìn)行打印',
  callback: res => {
  if (res === 'confirm') {
   loadLodop()
  }
  }
 })
 }
}

export default getLodop

<template>
 <div class="umess table-dialog">
 <!-- 表格組 -->
 <div class="umess table-main">
  <div class="title">{{ tabName }}</div>
  <!-- 導(dǎo)入導(dǎo)出 -->
  <div class="btn-top-list">
  <el-button type="primary" plain @click="exportReport">導(dǎo)出報表</el-button>
  <el-button type="primary" plain @click="printReport">打印報表</el-button>
  </div>
  <!-- 表格組 -->
  <div id="tableId" class="table-box">
  <table class="utable">
   <caption><b><font face="黑體" size="3">{{ tabName }}</font></b></caption>
   <thead>
   <tr v-for="(tr,index) in tableHead" :key="index">
    <td v-for="(item,i) in tr" :key="i" :colspan="item.cols" :rowspan="item.rows" :min-width="item.width">{{ item.value }}</td>
   </tr>
   </thead>
   <tbody>
   <tr v-for="(item,index) in tableBody" :key="index">
    <td v-for="(td, i) in item" :key="i" :colspan="td.cols" :rowspan="td.rows">
    <div class="td1">{{ td.value }}</div>
    </td>
   </tr>
   </tbody>
  </table>
  </div>
 </div>
 <!-- end -->
 </div>
</template>

<script>
import { tableHead, tableResolve } from '../excelTem/reportOne.js'
import getLodop from '@/api/lodop'
export default {
 data() {
 return {
  tabId: '',
  tabName: '',
  tableHead: tableHead,
  tableBody: []
 }
 },
 mounted() {

 },
 methods: {
 // 打印報表
 printReport() {
  const LODOP = getLodop()
  if (LODOP) {
  var strBodyStyle = '<style>'
  strBodyStyle += 'table { border-top: 1 solid #000000; border-left: 1 solid #000000; border-collapse:collapse; border-spacing:0;}'
  strBodyStyle += 'caption { line-height:2em; }'
  strBodyStyle += 'td { border-right: 1 solid #000000; border-bottom: 1 solid #000000; text-align:center; padding:2px 3px; font-size:11px;}'
  strBodyStyle += '</style>' //設(shè)置打印樣式
   var strFormHtml = strBodyStyle + '<body>' + document.getElementById('tableId').innerHTML + '</body>' //獲取打印內(nèi)容
  LODOP.PRINT_INIT('') //初始化
  LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4') //設(shè)置橫向
  LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', strFormHtml) //設(shè)置打印內(nèi)容
  LODOP.SET_PREVIEW_WINDOW(2, 0, 0, 800, 600, '') //設(shè)置預(yù)覽窗口模式和大小
  LODOP.PREVIEW()
  }
 }
 }
}
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: