Vue使用lodop打印小結

一. Lodop與C-Lodop的區別

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

2. 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>

複製代碼

以上原文由夭夭我的總結，若有轉載請說明出處