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