vue2项目中在线预览csv文件
简介
希望在项目中，在线预览.csv文件，本以为插件很多，结果都只是支持excel（.xls、.xlsx）一到.csv就歇菜。。。
关于文件预览
vue-office：文档、 查看在线演示demo，支持docx、.xlsx、pdf、pptx格式，优势可以vue组件形式嵌入系统，只需要普通文档预览使用这个足矣。
univer：文档、查看在线演示demo、支持docx、.xlsx、pdf、pptx格式，以.xlsx为主，不如vue-office接入简单，也不如kkFileView、OnlyOffice支持的格式丰富。
kkFileView：文档、查看在线演示demo、大部分格式都支持，但需要后端部署，优势比OnlyOffice支持格式更多。
OnlyOffice：文档、vue3组件、大部分格式都支持，但需要后端部署，优势有vue3组件。
效果
简单粗暴无需手动添加样式，引入调用即可 。
heiho.js github ：用于渲染弹窗
PapaParse github：用于解析csv文件
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="referrer" content="no-referrer" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
<title>vue2项目中在线预览csv文件</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kktsvetkov/heiho@0.3.3/heiho.css" />
<style>
/* 页面所需样式 */
html,
body,
#app {
width: 100%;
margin: 0;
padding: 0;
}
.cardBox {
width: 50%;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
margin: 0 auto;
}
</style>
</head>
<body style="background: #eee;">
<div id="app" class="pt10">
<div class="cardBox pl10 pr10 pt15 pb15 borBox bgf ml12 mr12 mb12 fz16">
<p>在线预览csv文件</p>
<button @click="viewForUrl">通过在线可访问的csv地址的方式</button>
<br />
<button @click="viewForFlie">通过接口返回csv文件流的方式</button>
</div>
</div>
</body>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<!-- 引入heiho -->
<script src="https://cdn.jsdelivr.net/npm/@kktsvetkov/heiho@0.3.3/heiho.min.js"></script>
<!-- 引入papaparse -->
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
}
},
created() {
},
mounted() {
},
methods: {
// 在线可访问的csv文件，可通过路径方式预览
viewForUrl(){
Papa.parse(
'https://support.staffbase.com/hc/en-us/article_attachments/360009197071/email.csv',
{
download: true,
complete: function(results) {
const data = results.data;
// 渲染组件
Heiho(data, { max: data.length });
}
}
);
},
// 无法访问的文件，通过接口拿到文件流的方式预览
viewForFlie(){
fetch('https://support.staffbase.com/hc/en-us/article_attachments/360009197071/email.csv')
.then(response => {
if (response.ok) {
return response.blob();
}
throw new Error('Network response was not ok.');
})
.then(blob => {
Papa.parse(
blob,
{
complete: function(results) {
const data = results.data;
// 渲染组件
Heiho(data, { max: data.length, title: 'email.csv' });
}
}
);
})
}
}
})
</script>
</html>
外传
期待2025、这几年互联网似乎进入了末期，好像经济危机在身边，可能十年后，人们会谈论着202x年就是低谷期。
我也是时常跟媳妇说，再失业了，如果找不到合适的码农岗位，我就要转行了。自古逢秋悲寂寥，我言秋日胜春朝。
原文地址：https://blog.csdn.net/qq_25252769/article/details/143790777
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！