word打印---doc转html后进行打印，window.print、print-js、vue-print-nb

提示：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>