这个功能其实也是自己学习到的,做完也有一段时间了,一直想记录总结一下,但一直没时间,今天总算闲了一点,趁一大早活还没找上门来,赶紧抓住时间鸭!
1、打印预览
打印预览说白就是实现快速跳转新页面预览信息,新页面有打印按钮,绑定方法调起系统打印机实现打印功能。
本来我以为这个功能还要将文件先下载下来,再在浏览器进行打开。但doc和docx格式是无法直接在浏览器中显示的,还需要转换为浏览器支持的格式,这样会很麻烦。所以,如果在文件格式统一的情况下,我们可以再写一个页面,模拟文档的格式进行排版,制作一个模板,打开页面的时候调用接口填充信息即可,打印功能也可以写在模板页面。
新页面上代码
<template>
<div class="print-container">
<!-- 这里是模板信息 -->
<p class="title">
<span>个人信息</span>
</p>
<p>
<span class="normal-text">姓名:</span>
<span class="value-text">{{detail.name}}</span>
</p>
<p>
<span class="normal-text">年龄</span>
<span class="value-text">{{detail.age}}</span>
</p>
<div class="btn">
<Button class="btn-def" type="primary" size="large" @click="$router.go(-1)">关闭</Button>
<Button class="btn-def" type="primary" size="large" @click="print">打印</Button>
</div>
</div>
</template>
<script>
export default {
name:'Print',
data () {
return {
complainId: 0,
detail: {
},
url : ''// 这里是获取具体信息内容的接口地址
}
},
mounted () {
this.complainId = this.$route.query.id //拿到跳转路由时携带的id
this.loadDetail() //请求接口 拿到信息
}
methods: {
loadDetail () {
this.$http.get(this.url+'?id='+this.complainId).then(res => {
this.detail = res.result
})
},
print () {
window.print() //调用系统打印机
}
}
}
</script>
<style lang="less" scoped>
.print-container{
width: 210mm;
margin: 0 auto;
padding: 10mm;
.title{
font-size: 8.47mm;
text-align: center;
font-family: '黑体';
span{
margin: 0 auto;
}
margin-bottom: 30px;
}
p{
font-size: 5.29mm;
font-family: '宋体';
color: #000;
display: flex;
margin-bottom: 10px;
min-height: 30px;
.value-text{
flex:1;
padding: 0 15px;
border-bottom: 1px solid #000;
}
}
.btn{
text-align: center;
margin-top: 50px;
.btn-def{
margin: 0 20px;
}
}
}
@media print {
.btn{
display: none;
}
}
</style>
ok 以上就完成了打印预览的功能
2、生成(导出)文档
实现点击,直接在浏览器左下角下载文件(如图) 无须跳转页面 和我们平时下载图片或者文件一样的效果
代码实现:
downloadTemp (file) {
let a = document.createElement('a')
a.setAttribute('download', 'temp')// download属性
a.setAttribute('href', file)// href链接
a.click()
},
download() {
let downLoadUrl = window._CONFIG['domianURL']+this.url.download+'?id='+this.id
this.downloadTemp(downLoadUrl)
},
重点在downloadTemp方法 传入一个下载地址即可
好了,以上就是今天整理的方法啦 现在已经是下午三点多了。。。
没错,上午活找上门了(摊手)ε=(´ο`*)))
其实平时很想经常整理知识点的 嗯…由于各种原因吧 就…好吧 我也挺懒 ̄□ ̄
我发现我可真是个话痨 ̄□ ̄||
溜┏(^0^)┛