vue项目实现打印预览、生成(导出)文档功能

这个功能其实也是自己学习到的,做完也有一段时间了,一直想记录总结一下,但一直没时间,今天总算闲了一点,趁一大早活还没找上门来,赶紧抓住时间鸭!

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^)┛

  • 8
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值