FileImport 文件导入

FileImport 概述

简单的文件导入。选择文件后将 xls 等类型文件内容导入
说明：需要在自己的工程中安装 xlsx 插件,同时在自己工程中的 main.js 中单独引入

此组件只在1.0.19及以上版本有效

插件安装:

cnpm i xlsx --save 
cnpm i encoding --save //1.0.25及其以上版本不用安装encoding

工程引入 main.js 中引入:

import XLSX from 'xlsx'
import encoding from 'encoding' //1.0.25及其以上版本不用安装encoding
import HFileImport from 'h_ui/dist/lib/FileImport.js'
Vue.component('h-file-import', HFileImport)

注意：由于浏览器安全性限制，该组件不支持保存文件路径
目前仅支持 chrome 浏览器使用

FileImport 代码示例

基本用法

简单的文件导入。选择文件后将xls等类型文件内容导入，添加 on-choose-file 返回 data (表格数据)及 columndTitle (第一行标题)

on-change

选中较大文件时使用 on-change 及 on-choose-file 实现 loading 效果

FileImport API

FileImport props

属性	说明	类型	默认值
type	导入方式，值可选 select (按钮选择方式导入文件,默认), drag (拖拽方式导入文件)	String	select
accept	文件接收类型，详情值参照原生input file accept提供值，默认导入csv/xls/xlsx文件类型	String	text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel
showFileName	是否在导入文件按钮或者拖拽后显示导入的文件名	Boolean	true
selfConfig	自定义导入，为true添加h-upload-self样式	Boolean	false
excelIdx	从一个文件中的第几张子表开始导入内容	String || Number	1
excelSize	从一个文件中的导入几张子表，值可选整数字符或者 all (表示导入所有表内容)	String || Number	1
customWarning	需与on-warning事件配合使用，当导入文件类型校验不正确时，不弹出组件内部默认弹窗通知，客户可根据事件返回自定义通知内容	Boolean	false

FileImport events

事件名	说明	返回值
on-change	选择文件并点击确定后触发	第一个参数为状态，true 表示已选中;第二个参数为文件名 fileName
on-choose-file	选择文件导入后返回当前要导入的 data 及 dataTitle	第一个参数为 data,格式为{'sheet1name': [data],}, 第二个参数为dataTitle
on-warning	开启 customWarning 属性，选择文件导入后，当校验不通过时触发	第一个参数为文件类型、名称、修改时间等信息集合