项目实训（七）上下文展开与导出界面

目录

一、通过段落跳转上下文

二、上下文的段落展示

1、代码

2、结果展示

三、导出功能

1、要求

2、安装FileSaver包

3、在main.js中全文引入

4、设置导出方法

5、结果展示

四、回退到段落界面

---

一、通过段落跳转上下文

同样的，在点击【展开】时，带着参数段落id，跳转到显示上下文的页面。

<router-link tag="a" :to="{path: '/contentAll',query:{id:tableData.contentId}}" @click="postRecord(tableData.contentId)" class="sTitle-sub-head" style="font-size: 18px;color: #606060">—展开—</router-link>

二、上下文的段落展示

1、代码

    <!-- 显示段落 -->
    <section class="feature-content">
      <div class="row justify-content-center" style="float: left" >
        <div class="feature-content feature-content-5" ref="text">
          <el-button class="search-btn" @click="outData">导出</el-button>
          <div  class="feature-discription"  v-for="tableData in tableDatas" >
            <p  v-html="tableData.ch" style="font-family: 'Microsoft YaHei UI'"> {{tableData.ch}}</p>
            <p  v-html="tableData.eng"> {{tableData.eng}}</p>
            <br>
          </div>
        </div>
      </div>
    </section>

通过展示每个段落的中、英文，并循环展示在一个div中。每个段落之间加一个回车，展示更加清晰。

mounted()

  mounted() {
    this.id = this.$route.query.id
    this.findTXT()
    if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded";
      location.reload();
    }
  },

交互代码：

async findTXT(){
      var contentID = this.id
      var _this = this
      let url = '/contents/getCont'
      await this.$http.get(url,{
        params:{
          book:'1',
          id:contentID
        }
      }).then(function (resp){
        _this.tableDatas=resp.data.data;
        console.log(resp)

      }).catch(function (error){
        console.log(error)
      })
    },

2、结果展示

三、导出功能

1、要求

在展示上下文中，用户可以点击导出文本txt形式

2、安装FileSaver包

npm install file-saver --save

3、在main.js中全文引入

 import {saveAs} from 'file-saver';

4、设置导出方法

在导出按钮上设置事件属性，调用saveAs方法，设置导出的格式和名字

outData(){

      var data = this.$refs.text.innerText;
      let str = new Blob([data],{type:'text/plain;charset=utf-8'});
      saveAs(str,'content.doc');
    }

5、结果展示

四、回退到段落界面

由于展开上下文，用户点击可以回到上一个页面的操作很频繁。但直接跳转到段落查询页面，之前的查询记录会被刷新。所以要通过history，在不刷新的情况下回到前一个页面。

<li><a href="javascript:history.back(-1)" >段落查询</a></li>