提示：word预览方式—插件

文章目录

• • @[TOC](文章目录)
• 前言
• 一、vue-office-docx把docx转换html
• 二、调取window.print
• 三、print-js
• 四、vue-print-nb
• 总结

前言

word预览

一、vue-office-docx把docx转换html

npm install vue-office-docx -S-D

officeDocx.vue

<template>
    <div class="preview_box">
      <VueOfficeDocx :src="htmlContent"></VueOfficeDocx>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  import VueOfficeDocx from '@vue-office/docx'
  //引入相关样式
  import '@vue-office/docx/lib/index.css';

  
  export default {
    name: 'preview',
    components:{VueOfficeDocx},
    data () {
      return {
        src:`.docx文件rul`,
        htmlContent:''
      }
    },
    mounted(){
      this.docToHtml();
    },
    methods: {
      docToHtml(){
        axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{
          this.htmlContent = res.data;
        })
      }
    }
  }
  </script>
  <style scoped></style>
  

样式还原度一般，间距太大，分页也有问题

二、调取window.print

officeDocx.vue

<template>
    <div class="preview_box" >
      <div class="preview_print_btn" @click="printHTML">打印</div>
        <div  ref="printBoxRef">
          <VueOfficeDocx :src="htmlContent"></VueOfficeDocx>
        </div>
    </div>
  </template>

<script>
  import axios from 'axios'
  import VueOfficeDocx from '@vue-office/docx'
  //引入相关样式
  import '@vue-office/docx/lib/index.css';

  
  export default {
    name: 'preview',
    components:{VueOfficeDocx},
    data () {
      return {
        src:`https://iteachcdn.test.xdf.cn/doc/111f92d3d71f471db47a4cb88b425d71.docx`,
        // src:`.docx文件rul`,
        htmlContent:''
      }
    },
    mounted(){
      this.docToHtml();
    },
    methods: {
      docToHtml(){
        axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{
          this.htmlContent = res.data;
        })
      },
      printHTML(){
        // 新建窗口
        const win = window.open('','_blank');
        // 把要打印的html写入新窗口
        win.document.write(this.$refs.printBoxRef.innerHTML);
        // 调起浏览器打印
        win.window.print();
        // 关闭新窗口
        win.window.close();  
      },
    }
  }
  </script>
<style scoped>
.preview_print_btn{
  height: 32px;
  line-height: 32px;
  background: #0e7a38;
  color: #fff;
  text-align: center;
}
</style>

预览有问题，打印也有问题

三、print-js

npm install print-js -S-D

officeDocx.vue

<template>
    <div class="preview_box" >
      <div class="preview_print_btn" @click="printHTML">打印</div>
        <div  ref="printBoxRef">
          <VueOfficeDocx :src="htmlContent"></VueOfficeDocx>
        </div>
    </div>
  </template>

<script>
  import axios from 'axios'
  import VueOfficeDocx from '@vue-office/docx'
  //引入相关样式
  import '@vue-office/docx/lib/index.css';
  import printJS from 'print-js'
  export default {
    name: 'preview',
    components:{VueOfficeDocx},
    data () {
      return {
        src:`https://iteachcdn.test.xdf.cn/doc/111f92d3d71f471db47a4cb88b425d71.docx`,
        // src:`.docx文件rul`,
        htmlContent:''
      }
    },
    mounted(){
      this.docToHtml();
    },
    methods: {
      docToHtml(){
        axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{
          this.htmlContent = res.data;
        })
      },
      printHTML(){
        printJS({
          printable: this.$refs.printBoxRef,
          type: 'html',
          targetStyles: ['*']
        }); 
      },
    }
  }
  </script>
<style scoped>
.preview_print_btn{
  height: 32px;
  line-height: 32px;
  background: #0e7a38;
  color: #fff;
  text-align: center;
}
</style>

打印样式相对好一些，但是分页有问题

四、vue-print-nb

npm install vue-print-nb -S-D

officeDocx.vue

<template>
    <div class="preview_box" >
      <div class="preview_print_btn" v-print="printobj">打印</div>
      <div id="printBox" ref="printBoxRef">
        <VueOfficeDocx :src="htmlContent"></VueOfficeDocx>
      </div>
    </div>
  </template>

<script>
  import axios from 'axios'
  import VueOfficeDocx from '@vue-office/docx'
  //引入相关样式
  import '@vue-office/docx/lib/index.css';
  import Print from 'vue-print-nb';
  
  export default {
    name: 'preview',
    components:{VueOfficeDocx},
    data () {
      return {
        src:`.docx文件rul`,
        htmlContent:'',
        printobj: {
          id: "printBox",
          popTitle: '标题',
          extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
          extraHead: '<meta http-equiv="content-language" content="zh-cn" />',
          beforeOpenCallback(vue) {
            console.log('调起打印弹窗之前');
          },
          openCallback(vue) {
            console.log('调起打印弹窗');
          }
        }
      }
    },
    directives: { Print },
    mounted(){
      this.docToHtml();
    },
    methods: {
      docToHtml(){
        axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{
          this.htmlContent = res.data;
        })
      },
    }
  }
  </script>
<style scoped>
.preview_print_btn{
  height: 32px;
  line-height: 32px;
  background: #0e7a38;
  color: #fff;
  text-align: center;
}
@media print {
  @page {
    size: auto;
    margin: 3mm;
  }
  body {
    height: auto;
  }
}
</style>

打印样式也有问题
综上：word转html后进行打印方式存再问题，不建议使用

总结

踩坑路漫漫长@~@