前端看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