vue3中,下载模板(三)——前端本地下载附件
效果
1、页面
index.vue
<el-button type="primary" @click="fileDownload">下载模板</el-button> <script setup> import {downFile} from '@src/utils/util' // 下载模板 const fileDownload = async () => { downFile('Plan-Import模板.xlsx') } </script>
2、模板
3、file流文件处理
src\utils\util.js
//本地文件下载 下载的模板文件放在public下的file文件夹中 export const downFile = (fileName) => {
const anchor = document.createElement('a') anchor.href = `${
process.env.BASE_URL}static/file/${
fileName}` anchor.setAttribute('download', fileName) anchor.innerHTML = 'downloading...' anchor.style.display = 'none' document.body.appendChild(anchor) setTimeout(() => {
anchor.click() document.body.removeChild(anchor) setTimeout(() => {
self.URL.revokeObjectURL(anchor.href) }, 250) }, 66) }
到此这篇vue3中,下载模板(三)——前端本地下载附件的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!
版权声明:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符,请将相关资料发送至xkadmin@xkablog.com进行投诉反馈,一经查实,立即处理!
转载请注明出处,原文链接:https://www.xkablog.com/qdvuejs/10769.html