下载
要在Vue前端实现对文档流下载功能，可以通过以下几种方法：
1、使用a标签和Blob对象进行文件下载，2、利用第三方库如FileSaver.js。下面详细介绍这几种方法的具体实现步骤及其原理。
一、通过Axios获取文件并下载，使用a标签和Blob对象进行文件下载
这种方法适用于从服务器端获取文件并下载的场景，特别是当文件是通过API接口返回的。
-
使用Axios获取文件数据：
Axios是一个基于Promise的HTTP客户端，可以方便地进行AJAX请求。我们可以通过Axios获取文件数据，并将其转换为Blob对象。
-
下载文件：
获取到文件数据后，同样可以使用a标签和Blob对象的组合进行文件下载。
import axios from 'axios';
//下载时，添加加载中的效果
const downloadLoadingInstance = ElLoading.service({
text: "正在下载数据，请稍候",
background: "rgba(0, 0, 0, 0.7)",
})
axios({
method: 'get',
url: 'https://example.com/file', // 替换为你的文件URL
responseType: 'blob'
}).then(response => {
// 创建Blob对象，这段代码创建了一个默认的Blob对象，没有指定字符编码。因此，它使用浏览器默认的字符编码（通常是UTF-8）
const url = window.URL.createObjectURL(new Blob([data]));
// 创建隐藏的a标签
const a = document.createElement('a');
//将这个<a>元素的href属性设置为前面创建的Blob对象的URL
a.href = url;
a.download = filename; // 替换为你的文件名，例：`${params.service + "-" + new Date().getTime()}.xlsx`
//将a标签添加到文档中 document.body.appendChild(a); // 触发下载 a.click(); //清理工作 document.body.removeChild(a);//从文档中移除这个<a>元素，以保持DOM的整洁 window.URL.revokeObjectURL(url); // 释放之前创建的Blob URL，以节省内存资源 downloadLoadingInstance.close();//下载完成关闭加载中效果 }).catch(error => { console.error('文件下载失败', error); });
二、利用第三方库如FileSaver.js
FileSaver.js是一个专门用于文件保存的库，简化了Blob对象文件下载的过程。它提供了一个saveAs方法，可以直接将Blob对象保存为文件。
- 安装FileSaver.js：
可以通过npm或yarn安装FileSaver.js。
npm install file-saver
- 使用FileSaver.js进行文件下载：
通过FileSaver.js的saveAs方法，可以轻松实现文件下载。
示例代码：
import { saveAs } from 'file-saver';
// 创建Blob对象
const data = new Blob(['Hello, world!'], { type: 'text/plain' });//Blob 包含的是纯文本数据。
// 使用FileSaver.js保存文件
saveAs(data, 'example.txt');
要在Vue3前端实现对获取的文本数据下载功能，可以通过以下几种方法：
1、使用名为 SheetJS 的 JavaScript 库下面详细介绍这几种方法的具体实现步骤及其原理。
一、前端对获取的文本数据进行下载
1.使用名为 SheetJS 的 JavaScript 库，将一个 JSON 数据转换为 Excel 文件，设置单元格的格式和列宽，然后生成并下载该文件
let downData = []
//good数组为要下载的表格数据，但是最终要的格式有所改变，需要处理：
good.value.forEach(item => {
let res = [];
console.log('item',item)
console.log('item.channelNo',item.circle)
console.log('item.mode',item.mode)
console.log('item.BitRate',item.BitRate)
let arr = []
arr.push(item.no1) //第一列数据
arr.push(item.satelliteCode)
downData.push(arr)
})
//宽度
const options = {
'!cols': [
{wpx: 134},
{wpx: 134},
]
};
const exportData = downData.map(item => {
return {
'名称1': item[0],
'名称2': item[1],
}
})
// 创建 Workbook 对象
const workbook = XLSX.utils.book_new();
// 创建 Worksheet 对象
const worksheet = XLSX.utils.json_to_sheet(exportData);
for (const key in worksheet) {
if (worksheet[key] instanceof Object) {
if (worksheet[key].v) {
worksheet[key].t = 's'
}
worksheet[key].s = {
alignment: {
vertical: 'center',
horizontal: 'left',
indent: 0,
}
}
}
}
worksheet['!cols'] = options['!cols']
// 将 Worksheet 添加到 Workbook 中,moment()是获取当前时间
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
const tail = '-' + moment()
// 生成 Excel 文件并下载
XLSX.writeFile(workbook, `下载文件名${tail}.xlsx`);
附：点击按钮，下载echarts为HTML格式
//写页面组件
<el-button type="primary" @click="saveAsHtml(chartId)">保存为HTML
<div :id="chartId" style=" width: 100%;height: 100%;">
</div>
//定义变量
const chartId = ref('');
let htmlaa = ref({})
//引入echarts
import * as echarts from "echarts";
//编写方法
const saveAsHtml = (chartId) => {
let s = {}
getHtml(item)
proxy.$modal.msgWarning('请稍候，正在下载中.....');
setTimeout(() => {
console.log('htmlaa.value', htmlaa.value)
s = writer(${chartId}.html, htmlaa.value, 'utf-8');//（文件名，内容，编码)
}, 1000)
return s
};
function getHtml(item) {
let params = {
stationId: props.planInfo.stationId,
startTime: startTime.value,
endTime: endTime.value,
deviceId: item.deviceId,
paramId: item.paramId
}
let chartData1 = {}
console.log('params', params)
getlistAll(params).then(res => {
if (res.code === 200) {
//获取图表信息,这里和上面可能对不太上，因为我上面用的遍历画图，这里用接口获取图表数据
chartValue = res.data;
nextTick(() => {
// 把配置和数据放这里，处理数据
let option = initOption(item.chartId);
nextTick(() => {
// 获取图表数据，由于数据最终要放到HTML中，将对象转成JSON格式
chartData1 = JSON.stringify(option);
console.log(option, "option")
console.log(chartData1, "chartData1")
//最终的HTML，想什么样自己写，body里放模板组件和处理数据方法即可
htmlaa.value = ` </div>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"><\/script>
<script type="text/javascript">
const dom = document.getElementById('${item.chartId}');
console.log(dom,"dom")
const myChart = echarts.init(dom, null, {
renderer: 'svg',
useDirtyRect: false
});
// if (option && typeof option === 'object') {
//
// }
myChart.setOption(${chartData1});
window.addEventListener('resize', myChart.resize);
<\/script>
</body>
</html>`
})
})
}
})
}
function writer(fileName, content, option) {
var a = document.createElement('a');
var url = window.URL.createObjectURL(new Blob([content],
{type: (option.type || "text/plain") + ";charset=" + (option.encoding || 'utf-8')}));
a.href = url;
a.download = fileName || 'file';
a.click();
window.URL.revokeObjectURL(url);
}
参考文章：https://worktile.com/kb/p/3639751
