Vue使用lodop實現打印小結

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

一. Lodop與C-Lodop的區別

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

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

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

二.vue中使用Lodop

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

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

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

三.實例代碼

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

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

2. template模板代碼

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

示例： 進行getLodop的引用 import getLodop from '你的LodopFuncs.js 的路徑'

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

 LODOP.PRINT_INIT("")

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

 LODOP.PREVIEW()

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

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

四.附源碼

import { MessageBox } from 'element-ui'

// ====頁面動態加載C-Lodop雲打印必須的文件CLodopfuncs.js====
var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
var oscript = document.createElement('script')
// 讓本機的瀏覽器打印(更優先一點)：
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打印控件還沒準備好，請稍後再試！')
  return
 }
 return LODOP
 } catch (err) {
 MessageBox({
  title: '溫馨提示',
  type: 'warning',
  showCancelButton: true,
  message: '您還未安裝打印控件，點擊確定下載打印控件，安裝成功後刷新頁面即可進行打印',
  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>
  <!-- 導入導出 -->
  <div class="btn-top-list">
  <el-button type="primary" plain @click="exportReport">導出報表</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>' //設置打印樣式
   var strFormHtml = strBodyStyle + '<body>' + document.getElementById('tableId').innerHTML + '</body>' //獲取打印內容
  LODOP.PRINT_INIT('') //初始化
  LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4') //設置橫向
  LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', strFormHtml) //設置打印內容
  LODOP.SET_PREVIEW_WINDOW(2, 0, 0, 800, 600, '') //設置預覽窗口模式和大小
  LODOP.PREVIEW()
  }
 }
 }
}
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。