Предварительная практика пакетной печати изображений QR-кода Vue

задняя часть внешний интерфейс Апплет WeChat Vue.js
Предварительная практика пакетной печати изображений QR-кода Vue

Это 11-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления

1. Обзор функций

1.1 Требования

Далее нам нужно распечатать сгенерированный ранее QR-код. Ниже моя попытка.

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

1.2 Визуализация страницы

image-20210811152753006

2. Реализация функции

Существует два распространенных способа реализации печати в Vue:

  • Ссылка на плагин vue-print-nb

  • Загрузите print.js в локальный файл:

    • 1. Адрес загрузки:GitHub.com/attraction66/v UE PL…

    • 2. Глобальная регистрация (main.js)

      import Print from './plugins/print'
Vue.use(Print) // 注册

    • 3. Используйте

      <div ref="print" >
　　<p>打印内容</p>
　　<p class="no-print">不要打印我</p>
</div>
<button @click="handlePrintText">打印</button>
<!--no-print样式类 为不打印区域-->

      methods:{
  handlePrintText(){
    this.$print(this.$refs.print)
  }
}

Я выбрал подход vue-print-nb, попробовав его.

2.1 Введение в использование Vue-print-nb

1. Установка

npm i vue-print-nb -S

2. Глобальная регистрация:

import Print from 'vue-print-nb'
Vue.use(Print)

3. Инструкция по применению:

Информация QR-кода представляет собой URL-ссылку. Если вы напрямую нажмете на пакетную печать, напечатанное содержимое должно отображаться на этой странице. Если вы обнаружите список, вы должны загрузить его и представить на странице. Только внешний интерфейс может предварительно просмотреть печать. Итак, здесь нам нужно перейти на страницу и отобразить содержимое для печати.

image-20210811155058134

4. Спросите и прыгайте

    <giant-print-page @editShow="printBatch(scope.row)">批量打印</giant-print-page>
    
    //批量打印
    printBatch(row){
      this.$router.push({path:'/am/device/print',query: {id:row.id}})
    },

Отображение содержимого для печати на странице print.vue

 <div>
  <button v-print="'#printTest'">立刻打印</button>
  <button @click="backlist">返回列表</button>
  <h2> 当前二维码数量为：{{this.$data.deviceInfoList.length}}</h2>
  
    <div id="printTest" >
      <div  v-for="(item,index) in this.$data.deviceInfoList">
        <div>
          <h2>设备编号SN：{{item.sn}}</h2>
          <img :src="item.url" style="width:260px;height:260px;" />
        </div>
      </div>
    </div>
​
</div>
 
 
 mounted() {
    this.init()
  },
  methods:{
    init(){
      if(this.$route.query.id!=null){
        this.printBatch(this.$route.query.id)
      }
    }
     //批量打印
    printBatch(id){
      this.$data.DeviceInfoDTO={id:id}
      let device=this.$data.DeviceInfoDTO
      this.$api.req("/am/device/info/list",device,res=>{
        this.$data.deviceInfoList=res.data
        this.$data.dialogVisible=true
      },res=>{
        this.$message.error(res.msg)
      })
    },
    }
    

Страница, которую вы вводите в это время, выглядит так

image-20210811152609411

Затем нажмите, чтобы распечатать немедленно, эффект рендеринга страницы:

image-20210811155817647

2.2 Пейджинг

Этот эффект печати не достигает цели отображения QR-кода на одной странице в требовании.

После некоторого поиска я обнаружил, что тег page-break-after:always можно добавить в файл css. через #quote id

<div>
  <button v-print="'#printTest'">立刻打印</button>
  <button @click="backlist">返回列表</button>
  
  <h2> 当前二维码数量为：{{this.$data.deviceInfoList.length}}</h2>
    <div id="printTest" >
      <div  v-for="(item,index) in this.$data.deviceInfoList">
        <div style="page-break-after:always">
          <h2>设备编号SN：{{item.sn}}</h2>
          <img :src="item.url" style="width:260px;height:260px;" />
        </div>
      </div>
    </div>
</div>

3. Резюме

В целом, использование плагина vue-print-nb относительно простое, но здесь мы используем только функцию печати QR-кодов в пакетном режиме, поэтому этот плагин предназначен только для начального уровня. официальный документ.api.

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

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

Справочная документация:

Категории