mirror of
https://gitee.com/xuliangzhan_admin/vxe-table.git
synced 2026-01-21 05:27:57 +08:00
158 lines
4.5 KiB
Vue
158 lines
4.5 KiB
Vue
<template>
|
||
<div>
|
||
<p class="tip">
|
||
文件操作<br>
|
||
给 vue 实例挂载属性：<br>
|
||
Vue.prototype.$XSaveFile = VXETable.saveFile<br>
|
||
Vue.prototype.$XReadFile = VXETable.readFile<br>
|
||
</p>
|
||
|
||
<p>
|
||
<vxe-button @click="clickEvent1">读取一个文件</vxe-button>
|
||
<vxe-button @click="clickEvent2">读取指定类型文件</vxe-button>
|
||
<vxe-button @click="clickEvent3">读取多个文件</vxe-button>
|
||
</p>
|
||
|
||
<p>
|
||
<vxe-button @click="clickEvent6">保存为txt文件</vxe-button>
|
||
<vxe-button @click="clickEvent7">保存为html文件</vxe-button>
|
||
</p>
|
||
|
||
<p>
|
||
<vxe-button @click="clickEvent10">下载文件</vxe-button>
|
||
</p>
|
||
|
||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||
|
||
<pre>
|
||
<pre-code class="xml">{{ demoCodes[0] }}</pre-code>
|
||
<pre-code class="javascript">{{ demoCodes[1] }}</pre-code>
|
||
</pre>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
demoCodes: [
|
||
`
|
||
<p>
|
||
<vxe-button @click="clickEvent1">读取一个文件</vxe-button>
|
||
<vxe-button @click="clickEvent2">读取指定类型文件</vxe-button>
|
||
<vxe-button @click="clickEvent3">读取多个文件</vxe-button>
|
||
</p>
|
||
|
||
<p>
|
||
<vxe-button @click="clickEvent6">保存为txt文件</vxe-button>
|
||
<vxe-button @click="clickEvent7">保存为html文件</vxe-button>
|
||
</p>
|
||
|
||
<p>
|
||
<vxe-button @click="clickEvent10">下载文件</vxe-button>
|
||
</p>
|
||
`,
|
||
`
|
||
export default {
|
||
methods: {
|
||
async clickEvent1 () {
|
||
try {
|
||
const { file } = await this.$XReadFile()
|
||
this.$XModal.alert(\`文件名：\${file.name}，文件大小：\${file.size}\`)
|
||
} catch (e) {}
|
||
},
|
||
async clickEvent2 () {
|
||
try {
|
||
const { file } = await this.$XReadFile({
|
||
types: ['xlsx', 'html']
|
||
})
|
||
this.$XModal.alert(\`文件名：\${file.name}，文件大小：\${file.size}\`)
|
||
} catch (e) {}
|
||
},
|
||
async clickEvent3 () {
|
||
try {
|
||
const { files } = await this.$XReadFile({
|
||
multiple: true
|
||
})
|
||
this.$XModal.alert(\`共：\${files.length} 个文件\`)
|
||
} catch (e) {}
|
||
},
|
||
clickEvent6 () {
|
||
this.$XSaveFile({
|
||
filename: '文本',
|
||
type: 'txt',
|
||
content: '内容xxx'
|
||
})
|
||
},
|
||
clickEvent7 () {
|
||
this.$XSaveFile({
|
||
filename: '页面',
|
||
type: 'html',
|
||
content: '<html><head></head><body>内容xx</body></html>'
|
||
})
|
||
},
|
||
clickEvent10 () {
|
||
// 请求文件
|
||
fetch('/vxe-table/static/other/img2.gif').then(response => {
|
||
response.blob().then(blob => {
|
||
// 下载到本地
|
||
this.$XSaveFile({ filename: '图片', type: 'gif', content: blob })
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
`
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
async clickEvent1 () {
|
||
try {
|
||
const { file } = await this.$XReadFile()
|
||
this.$XModal.alert(`文件名：${file.name}，文件大小：${file.size}`)
|
||
} catch (e) {}
|
||
},
|
||
async clickEvent2 () {
|
||
try {
|
||
const { file } = await this.$XReadFile({
|
||
types: ['xlsx', 'html']
|
||
})
|
||
this.$XModal.alert(`文件名：${file.name}，文件大小：${file.size}`)
|
||
} catch (e) {}
|
||
},
|
||
async clickEvent3 () {
|
||
try {
|
||
const { files } = await this.$XReadFile({
|
||
multiple: true
|
||
})
|
||
this.$XModal.alert(`共：${files.length} 个文件`)
|
||
} catch (e) {}
|
||
},
|
||
clickEvent6 () {
|
||
this.$XSaveFile({
|
||
filename: '文本',
|
||
type: 'txt',
|
||
content: '内容xxx'
|
||
})
|
||
},
|
||
clickEvent7 () {
|
||
this.$XSaveFile({
|
||
filename: '页面',
|
||
type: 'html',
|
||
content: '<html><head></head><body>内容xx</body></html>'
|
||
})
|
||
},
|
||
clickEvent10 () {
|
||
// 请求文件
|
||
fetch('/vxe-table/static/other/img2.gif').then(response => {
|
||
response.blob().then(blob => {
|
||
// 下载到本地
|
||
this.$XSaveFile({ filename: '图片', type: 'gif', content: blob })
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|