django+vue3功能开发汇总

一、文件下载

1. excel文件下载

django接口内写法
	
	file_path = os.path.join( settings.DOWNLOADS_DIR + "/" + file_name)
	if os.path.exists(file_path):
	     response = FileResponse(open(file_path, 'rb'))
	     response['Content-Type'] = 'application/octet-stream'
	     response['Content-Disposition'] = f'attachment;filename="{download_url}"'
	     return response

vue中写法

	安装  
	npm install xlsx
	
	vue3的写法
	import * as XLSX from 'xlsx'
	
	保存方法
    const ws = XLSX.utils.aoa_to_sheet(res.data);
    const wb = XLSX.utils.book_new();
    let fileName =  文件名称.xlsx
    XLSX.utils.book_append_sheet(wb, ws, val.project_name);
    XLSX.writeFile(wb, fileName);

2. csv文件下载

django接口内写法
	
	file_path = os.path.join( settings.DOWNLOADS_DIR + "/" + file_name)
    if os.path.exists(file_path):
        response = FileResponse(open(file_path, 'rb'))
        response['Content-Type'] = 'application/octet-stream'
        response['Content-Disposition'] = f'attachment;filename="{download_url}"'
        return response

vue中写法

	// 假设上述代码的返回结果存储在变量response中
	let fileContent = res; // 响应对象
	let fileName =  文件名.csv
	// 将响应对象转换为Blob对象
	let blob = new Blob([fileContent]);
	// 创建一个URL对象，以便在下载链接中使用
	let downloadUrl = URL.createObjectURL(blob);
	// 创建一个下载链接，并将URL作为href属性值
	let a = document.createElement('a');
	a.href = downloadUrl;
	a.download = fileName;
	a.textContent = 'Download File';
	document.body.appendChild(a);
	a.click();
	URL.revokeObjectURL(downloadUrl);

3. word文件下载--预留
4. pdf文件下载--预留