vue2+elementUI +django展示文件内容

 前端看show_yuliao函数，注意使用blob接收

<template>
    <div>
         <el-container style="height:100%;">
              <el-aside width="200px">
               <Menu></Menu>
              </el-aside>
               <el-container>
                  <el-header>
                    <div style="float:right"><Logout></Logout></div>
                    <div style="margin-top:10px;">
                    <h1>语料库</h1>
                    </div>
                  </el-header>
                  <el-main >
                       <el-dialog title="语料明细" :visible.sync="dialogYuliaoVisible">
                          <el-table :data="yuliaoData">
                            <el-table-column type="index" label="序号" width="100">
                                  <!-- 使用 scoped slot 自定义列内容 -->
                                  <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                  </template>
                            </el-table-column>
                            <el-table-column property="yuliao" label="语料" width="200"></el-table-column>
                          </el-table>
                       </el-dialog>
                      <br>
                      <br>
                       <div style="width:80%; margin-left: auto;margin-right: auto;">
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%">
                                <el-table-column type="index" label="序号" width="100">
                                  <!-- 使用 scoped slot 自定义列内容 -->
                                  <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                  </template>
                                </el-table-column>
                                <el-table-column
                                  prop="name"
                                  label="语料名称"
                                  width="300">
                                </el-table-column>
                                <el-table-column
                                  prop="user"
                                  label="创建人"
                                  width="180">
                                </el-table-column>
                                <el-table-column
                                  prop="ctime"
                                  label="创建时间"
                                  width="200">
                                </el-table-column>
                                <el-table-column  label="操作" >
                                <template slot-scope="scope">
                                   <el-button-group>
                                     <el-button type="primary" @click="show_yuliao(scope.row.id)" icon="el-icon-view">查看语料</el-button>
                                     <el-button type="success" @click="download_yuliao(scope.row.id)" icon="el-icon-download">下载语料</el-button>
                                     <el-popconfirm  title="确定要删除吗？"  @confirm="delete_yuliao(scope.row.id)" >
                                     <el-button  type="danger" slot="reference" icon="el-icon-delete">删除语料</el-button>
                                     </el-popconfirm>
                                   </el-button-group>
                                </template>
                                </el-table-column>
                              </el-table>
                      <br>

                              <el-pagination
                                  @size-change="handleSizeChange"
                                  @current-change="handleCurrentChange"
                                  :current-page="currentPage"
                                  :page-sizes="[10, 20, 50, 100]"
                                  :page-size="pageSize"
                                  layout="total, sizes, prev, pager, next, jumper"
                                  :total="total">
                              </el-pagination>
                      </div>
                   </el-main>
               </el-container>
         </el-container>
    </div>
</template>

<script>
    import axios from 'axios'
    import Menu from "../components/Menu.vue"
    import Logout from "../components/Logout.vue"
    export default{
        name:"YuLiao",
            data() {
                     return {
                        tableData: [],
                        currentPage: 1,
                        pageSize: 10,
                        total: 10, // 假设总数据量为10
                        yuliaoData:[],
                        dialogYuliaoVisible:false,

                     }
            },
            components:{
                 Menu,
                 Logout,
            },
            mounted:function(){
                this.user = sessionStorage.getItem('user');
                  axios('/get_yuliaolist/',{
                    params:{
                        currentPage:this.currentPage
                    }
                  }).then(res=>{
                    this.tableData = res.data.yuliaolist
                    this.total = res.data.total
                    console.log('列表数据：',this.tableData)
                    console.log('total：',res.data.total)
                })

            // mounted关闭
            },

            methods:{
                // 页面大小改变时触发
                 handleSizeChange(val) {
                      this.searchinput = ''
                      this.pageSize = val;
                      // 重新加载数据
                      axios.get('/get_yuliaolist',{
                          params:{
                              currentPage:1,
                              pageSize:this.pageSize
                          }
                        }).then(res=>{
                           this.tableData =  res.data.yuliaolist
                           this.total = res.data.total
                           console.log('列表数据：',this.tableData)
                           console.log('total：',this.total)
                      })
                      this.currentPage = 1
                  },
                  // 当前页码改变时触发
                  handleCurrentChange(val) {
                      this.searchinput = ''
                      this.currentPage = val;
                      // 重新加载数据
                      axios.get('/get_yuliaolist',{
                        params:{
                            currentPage:this.currentPage,
                            pageSize:this.pageSize
                        }
                      }).then(res=>{
                         this.tableData =  res.data.yuliaolist
                         this.total = res.data.total
                         console.log('列表数据：',this.tableData)
                         console.log('total：',this.total)
                      })

                  },
                search_yuliao(){
                     axios.get('/get_yuliaolist',{
                        params:{
                            searchinput:this.searchinput
                        }
                  }).then(res=>{
                     this.tableData =  res.data.yuliaolist
                     this.total = res.data.total
                  })

                },
                onBeforeUpload(){
                    if (this.form.filename === '') {
                        alert('请输入语料库名字！');
                        return false
                    console.log('可以上传')
                    return true
      }
                },
                handleSuccess(response, file, fileList) {
                  alert('语料上传成功')
                  location.reload()
                  console.log('语料上传成功');
                },
                handleError(err, file, fileList) {
                  alert('语料上传失败')
                  location.reload()
                  console.error('语料上传失败');
                },
                show_yuliao(id){
                    this.dialogYuliaoVisible = true
                    axios({
                        url: '/show_yuliao/', // 替换为你的后端文件下载链接
                        method: 'GET',
                        responseType: 'blob', // 重要，设置响应类型为blob
                        params:{
                            id:id
                        }
                      }).then(res => {
                      // 读取文件内容并展示
                        const reader = new FileReader();
                        reader.onload = e => {
                       // console.log('here',e.target.result.split('\n').map(item =>item.trim()))
                        let list =e.target.result.split('\n').map(item =>item.trim())
                        //console.log(list[0])
                        let listtest = [];
                        for (let i = 0; i < list.length; i++) {
                              let dict = {};
                              dict['yuliao'] = list[i]; // 这里假设值与索引相同
                              listtest.push(dict);
                              // 将数组元素作为键，索引作为值
                             // console.log(i,dict)
                             // console.log(i,listtest)
                            }
                            console.log('here',listtest);

                        this.yuliaoData = listtest
                        };
                        reader.readAsText(res.data);

                      })

                },
                delete_yuliao(){
                    axios.get('/delete_yuliao/',{
                            params:{
                                id:id
                            }
                          }).then(res=>{
                             this.tableData =  res.data.yuliaolist
                             this.total = res.data.total
                             console.log('列表数据：',this.tableData)
                             console.log('total：',this.total)
                          })

                },
             // methods关闭
             },
             
    }
</script>

路由

path('show_yuliao/', show_yuliao),  # 展示语料库

def show_yuliao(request):
    id = request.GET['id']
    filename = DB_yuliao.objects.filter(id=id)[0].filename
    file_path = os.path.join(settings.YULIAO_ROOT, filename)
    file = open(file_path, 'rb')  # 打开文件
    response = FileResponse(file)  # 创建FileResponse对象
    return response