提示:word预览方式—插件
前言
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后进行打印方式存再问题,不建议使用
总结
踩坑路漫漫长@~@