Vue использует lodop для печати сводки

внешний интерфейс

I. Различия между LODOP и C-LODOP

  1. Управление печатью Lodop представляет собой подключаемый модуль браузера, который тесно интегрирован с браузером для реализации локальной печати Это интерактивный способ, встроенный в браузер. (Применимые браузеры: серия IE, версия Firefox 51 и предыдущие версии, версия Google 44 и предыдущие версии. (Новые версии Firefox и Google больше не поддерживают подключаемые модули np, а также нельзя использовать lodop))

  2. Служба печати C-Lodop предназначена для предоставления услуг по решению веб-печати, избавлению от зависимости от браузера и решению ситуации, при которой новая версия Google (версия 45 и последующие версии), 64-битный Firefox, edge и другие браузеры больше не поддерживает метод подключаемого модуля Lodop, служба печати C-Lodop поддерживает все браузеры.

Поскольку C-Lodop может заменить Lodop и поддерживает все браузеры, C-Lodop можно использовать непосредственно для выполнения требований к печати в реальном процессе разработки.

2. Использование Lodop в vue

1 Сохраните официальный файл LodopFuncs.js в каталог, например myProject\src\assets\LodopFuncs.js.

2 Измените файл LodopFuncs.js и добавьте строку кода внизу файла export { getLodop };//Export getLodop

3 Импортируйте модуль в файл, где находится обработчик события печати.Вызовите getLodop в функции события печати, чтобы получить объектную переменную LODOP, напишите свою собственную функцию печати в соответствии с официальным руководством и выведите через PRINT, PREVIEW и PRINT_DESIGN.

3. Пример кода

1. LodopFuncs.jsПоскольку выбрана служба печати C-Lodop, больше не нужно судить о каждом браузере, и больше не нужно запрашивать, какую версию элемента управления загрузить.

Переписанный файл lodopFuncs.js показан на рисунке ниже.Компонент элемента вводится в требования проекта, напоминая пользователю о том, что нужно нажать кнопку «ОК», чтобы загрузить элемент управления печатью (win32NT.exe поддерживает как 32-разрядные, так и 64-разрядные системы, поэтому нет необходимости в пользовательских операционных системах. После принятия решения просто загрузите и установите его и обновите страницу, чтобы использовать его)

2. код шаблона шаблона

Советы: обратите внимание на расположение идентификатора, который ссылается на documnet.getElmentById('tableId').innerHTML

Пример: сделайте ссылку на getLodop import getLdop из «пути к вашему LodopFuncs.js»

Для написания кода используется метод печати отчета.Основная программа состоит из трех строк кода let LODOP = getLodop()//Вызываем getLodop для получения объекта LODOP

    LODOP.PRINT_INIT("")

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

    LODOP.PREVIEW()

Однако в реальных требованиях к проекту необходимо судить пользователя, чтобы определить, установил ли пользователь службу печати.Если она не установлена, пользователю будет предложено загрузить и установить ее.Если она установлена, она может будет предложено установить его напрямую.

Стиль печати также будет отличаться в зависимости от потребностей проекта, некоторые из них представляют собой таблицы для печати, некоторые - текст, некоторые - изображения, пользователь управляет стилем письма, размером шрифта, настройками горизонтальной и вертикальной версии и т. д. в соответствии с официальными документ.

4. С исходным кодом

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>

Приведенный выше исходный текст суммирован лично Яояо, если есть какие-либо перепечатки, просьба указать источник

Категории