广州网站建设外包建设推广,海棠网站,ug编程培训,vps 做网站提示#xff1a;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-DofficeDocx.vue
templ… 提示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-DofficeDocx.vue
templatediv classpreview_boxVueOfficeDocx :srchtmlContent/VueOfficeDocx/div/templatescriptimport axios from axiosimport 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;})}}}/scriptstyle scoped/style 样式还原度一般间距太大分页也有问题
二、调取window.print
officeDocx.vue
templatediv classpreview_box div classpreview_print_btn clickprintHTML打印/divdiv refprintBoxRefVueOfficeDocx :srchtmlContent/VueOfficeDocx/div/div/templatescriptimport axios from axiosimport 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-DofficeDocx.vue
templatediv classpreview_box div classpreview_print_btn clickprintHTML打印/divdiv refprintBoxRefVueOfficeDocx :srchtmlContent/VueOfficeDocx/div/div/templatescriptimport axios from axiosimport VueOfficeDocx from vue-office/docx//引入相关样式import vue-office/docx/lib/index.css;import printJS from print-jsexport 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-DofficeDocx.vue
templatediv classpreview_box div classpreview_print_btn v-printprintobj打印/divdiv idprintBox refprintBoxRefVueOfficeDocx :srchtmlContent/VueOfficeDocx/div/div/templatescriptimport axios from axiosimport 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-equivcontent-language contentzh-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后进行打印方式存再问题不建议使用
总结
踩坑路漫漫长~
