图片打印---print-js，解决图片过长过宽，溢出分页问题

news2024/12/25 23:45:17

提示：打印图片

文章目录

@[TOC](文章目录)

前言
一、调取window.print
二、print-js通过图片url打印
三、print-js把图片转成html后调整尺寸再打印
总结

前言

一、调取window.print

printImage.vue

<template>
  <div class="print_img_fixed"> 
    <div class="print_btn" @click="printHTMLByWindowPrint">打印</div>
    <div class="print_img_content" ref="printImgContent">
        <img  class="print_img_print" :src="previewImageData.src" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    name: 'preview',
    data () {
      return {
        previewImageData:{
          src:`要打印图片的url`,
        },
      }
    },
    methods: {
      printHTMLByWindowPrint(){
        // 新建窗口
        const win = window.open('','_blank');
        // 把要打印的html写入新窗口
        win.document.write(this.$refs.printImgContent.innerHTML);
        // 记载图片后进行打印
        let img = new Image();
        img.src = this.previewImageData.src;
        img.onload = ()=>{
         // 调起浏览器打印
          win.window.print();
          // 关闭新窗口
          win.window.close();  
        }
      },
    }
  }
  </script>
<style scoped>

在这里插入图片描述
图片太长，打印有问题

二、print-js通过图片url打印

npm install print-js -S-D

printImage.vue

<template>
  <div class="print_img_fixed"> 
    <div class="print_btn" @click="goPrint">打印</div>
  </div>
</template>
<script>
  import printJS from 'print-js'
  
  export default {
    name: 'preview',
    data () {
      return {
        previewImageData:{
          src:`要打印图片的url`,
        },
      }
    },
    methods: {
      // 打印
      goPrint(){
        printJS({
            printable: this.previewImageData.src,
            type: 'image',
            targetStyles: ['*']
        });
      },
    }
  }
  </script>

在这里插入图片描述
图片太长，打印有问题

三、print-js把图片转成html后调整尺寸再打印

npm install print-js -S-D

printImage.vue

<template>
    <div class="preview_box">
       <div ref="docxPreviewRef" v-html="htmlContent"></div>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  import mammoth  from 'mammoth'
  export default {
    name: 'preview',
    components:{},
    data () {
      return {
        src:`.docx文件rul`,
        htmlContent:''
      }
    },
    mounted(){
      this.docToHtml();
    },
    methods: {
      docToHtml(){
        axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{
          mammoth.convertToHtml({ arrayBuffer: new Uint8Array(res.data) }).then((html)=>{
            this.htmlContent = html.value;
          })
        })
      }
    }
  }
  </script>
  <style scoped></style>