Vue项目导入导出文件功能以及导出文件后乱码问题及解决

目录
  • vue项目导入导出功能
    • 1.导出
    • 2.导入
    • 3.另一种方法实现文件上传

vue项目导入导出功能

1.导出

导出功能其实很简单,只需要调用后端的接口即可,不过有一些需要注意的地方,具体代码如下所示:

这是导出按钮,定义导出的点击事件:

<a-button type="primary" @click="downExcel">
      <template #icon>
            <UploadOutlined />
     </template>
     导出
</a-button>

js部分,调用接口,导出文件:

// 导出excel
        const downExcel = () => {
            if (state.selectedRowKeys.length == 0) {
                Message.warning("请先选择需要导出的数据")
                return
            }
            // const date = moment(new Date()).format("YYYY-MM")
            const params = {
                exportUserIds: state.selectedRowKeys
            }
            const hideLoading = message.loading("文件导出中...", 0)
            apiDownExcel(params)
                .then((res: any) => {
                    if (res.status == 200) {
                        const system = window.navigator.platform == "Win32" ? "window" : "mac"
                        const link = document.createElement("a")
                        const blob = new Blob([res.data], { type: "application/vnd.ms-excel" })
                        link.href = URL.createObjectURL(blob)
                        link.download = `月度薪资.${system == "mac" ? "xlw" : "xls"}` //下载的文件名
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link)
                    }
                })
                .finally(() => {
                    setTimeout(hideLoading, 0)
                })
        }

在这里需要注意的是:

点击导出按钮,接口跑通后,文件会成功导出,不过打开文件会出现乱码,这个时候我们需要配置下接口,具体代码如下所示:

// 导出月度薪资
export const apiDownExcel = (params: object) => {
    return request({
        url: "/api/slaughter_smart/mySalaryMonthResult/exportExcel",
        method: "post",
        data: params,
        responseType: "blob",
    })
}

需要设置 ** responseType: “blob” ** 即可正常打开该文件。

2.导入

导入功能也不难,ant-design-vue已经封装了上传组件,我们按照upload上传组件开发即可,具体代码如下所示:

<a-upload
     name="file"
     action="/api/slaughter_smart/mySalaryMonthResult/importExcel"
     :headers="{ Authorization: token, 'Muyuan-Auth': token }"
     accept=".xls,.xlsx"
     :multiple="false"
     :showUploadList="false"
     @change="uploadChangeHandle
>
     <a-button type="primary">
          <template #icon>
              <DownloadOutlined />
          </template>
          导入
     </a-button>
</a-upload>

解析:

action是上传文件请求的路径,headers里面设置了token,accept表示接受文件的格式,multiple表示是否上传多个文件,showUploadList表示是否展示uploadList,@change则表示上传文件改变时的状态,上传文件有三种状态,分别是uploading、done以及error。

使用action作为上传文件的接口路径,通常是没有携带token的,所以需要在请求头里自定义带上token。

文件上传后js部分代码:

// 文件状态 -- 上传文件后更新列表
        const uploadChangeHandle = (data: any) => {
            if (data.file.status == "done") {
                Message.success("文件导入成功")
                getList()
            }
            if (data.file.status == "error") {
                Message.error(data.file.response.message ? data.file.response.message : "文件导入失败")
                getList()
            }
        }

当然,还有其他的情况,还可以使用自定义上传的方式,通过customRequest覆盖默认上传的方式

3.另一种方法实现文件上传

接口部分:

// 导入月度薪资
export const apiImportExcel = (params: any) => {
    return request({
        url: '/api/slaughter_smart/mySalaryMonthResult/importExcel',
        method: 'post',
        data: params,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
}

html部分:

<!-- 导入模板弹框 -->
        <a-modal title="导入" :visible="modalDate.importVisivle" @cancel="cancelModal" :maskClosable="false" :footer="null" :width="540">
            <div>
                <a-button type="primary" ghost @click="downloadTemplateClick">
                    <template #icon>
                        <DownloadOutlined />
                    </template>
                    模板下载
                </a-button>
                <div style="font-size: 14px;color: #FF4122;font-weight: 400;margin-top: 5px">(注:请按照模板进行设计,如与模板不符将无法录入)</div>
            </div>
            <div style="margin-top: 30px">
                <a-upload :showUploadList="false" accept=".xls,.xlsx,xlw" :customRequest="customRequestChange">
                    <a-button type="primary" ghost v-if="!modalDate.fileList.length">
                        <UploadOutlined />
                        上传文件
                    </a-button>
                    <a-button type="primary" ghost disabled v-else>
                        <UploadOutlined />
                        上传文件
                    </a-button>
                </a-upload>
                <div class="martp_15">
                    <div class="dis_flex flex_y_center" v-for="(item, index) in modalDate.fileList" :key="index">
                        <i class="iconfont icon-paperclip marrt_10" style="font-size: 14px;color: #0194FE"></i>
                        <span style="color: #0194FE">{{ item.name }}</span>
                        <i class="iconfont icon-icon_close_remove" style="font-size: 20px;margin-left: 15px" @click.stop="deleteFileClick(index)"></i>
                    </div>
                </div>
            </div>
            <div class="text_right" style="margin-top: 20px">
                <a-button class="marrt_15" type="primary" v-prevent-click @click="imporSaveClick">确认</a-button>
                <a-button
                    @click="cancelModal"
                >取消</a-button
                >
            </div>
        </a-modal>

该弹框打开后效果如下图所示:

js部分:

// 自定义导入
        const customRequestChange = (options: any) => {
            modalDate.fileList.push(options.file)
        }

// 点击确认上传文件
        const imporSaveClick = () => {
            if (modalDate.fileList.length == 0) {
                message.warning("请选择上传的文件")
                return false
            }
            const params = new FormData()
            modalDate.fileList.forEach((item: any)=> {
                params.append("file", item)
            })
            apiImportExcel(params).then((res: any)=>{
                if (res.data.status == 200 && res.data.rel) {
                    getList()
                    message.success("上传成功!")
                    modalDate.importVisivle = false
                    modalDate.fileList = []
                }else {
                    message.error(res.data.message)
                }
            })
        }

该写法只能上传一个文件!!!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue + element-ui实现简洁的导入导出功能

    前言 众所周知,ElementUI,是一个比较完善的UI库,但是使用它需要有一点vue的基础.在开始本文的正文之前,我们先来看看安装的方法吧. 安装ElementUI模块 cnpm install element-ui -S 在main.js中引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' 全局安装 Vue.use(ElementUI) 当我们安装完记得重新运行,cnpm

  • Vue结合后台导入导出Excel问题详解

    最近Vue项目中用到了导入导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 导出Excel功能 这里不谈别人怎么实现的,我是从后台生成了Excel流文件返回给前端的. 下面具体看一下后台的代码: /** * 批量导出用户 * @param condition * @param response */ @PostMapping("/exportUser") public void exportUser(@RequestBody UserQu

  • vue-element-admin项目导入和导出的实现

    vue-element-admin导入组件封装 模板和样式 首先封装一个类似的组件,首先需要注意的是,类似功能,vue-element-admin已经提供了,我们只需要改造即可 excel导入功能需要使用npm包xlsx,所以需要安装xlsx插件 npm i xlsx 将vue-element-admin提供的导入功能新建一个组件,位置: src/components/UploadExcel import CommonTools from './CommonTools' import Uploa

  • Vue export import 导入导出的多种方式与区别介绍

    在使用vue导出时会有一个default关键字,下面举例说明下在导出时使用export和export default的对应的imort写法的区别 一.部分导出和部分导入 部分导出和部分导入的优势,当资源比较大时建使用部分导出,这样一来使用者可以使用部分导入来减少资源体积,比如element-ui官方的就推荐使用部分导入来减少项目体积,因为element-ui是一个十分庞大的框架,如果我们只用到其中的一部分组件, 那么只将用到的组件导入就可以了. 1.1部分导出的写法 export functio

  • Vue项目导入导出文件功能以及导出文件后乱码问题及解决

    目录 vue项目导入导出功能 1.导出 2.导入 3.另一种方法实现文件上传 vue项目导入导出功能 1.导出 导出功能其实很简单,只需要调用后端的接口即可,不过有一些需要注意的地方,具体代码如下所示: 这是导出按钮,定义导出的点击事件: <a-button type="primary" @click="downExcel"> <template #icon> <UploadOutlined /> </template>

  • Vue实现导入Excel功能步骤详解

    1.前端主导实现步骤 第一步,点击页面上的导入按钮,读入Excel文件 利用插件完成. 第二步,按照后端的要求对数据格式加工,转成他们需要的格式 需要自己写逻辑. 第三步,通过后端接口,将数据通过ajax发回去 调接口,常规操作. 简而言之:前端读excel文件,修改文件格式,调接口 2.实现读入Excel文件 注:此步骤就可实现前端导入功能.如对修改格式有兴趣,可以继续看第三步. 概括:复制代码到自己的文件夹下,下载必需的插件. 2.1 使用的是elementUI提供的vue-admin-el

  • 使用webpack搭建vue项目实现脚手架功能

    本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思维在调试的时候显得尤为重要,拥有良好的编程习惯和思维能力可以大幅度提高调试效率.而编程思维的培养往往需要经验的积累,只有把底层原理一遍遍地思考之后,才会有更深入的理解,这也是vue官方文档中不建议vue初学者直接使用vue-cli的原因之一. 所以今天特意一步步通过webpack配置,实现与vue-

  • Vue项目中v-bind动态绑定src路径不成功问题及解决

    目录 v-bind动态绑定src路径不成功 解决方案 1 解决方案 2 解决方案 3 vue踩坑--动态v-for图片路径问题 问题所在 解决办法 实现代码 v-bind动态绑定src路径不成功 问题:在做Vue项目的时候,由于项目需求,需要动态绑定img的src时,突然发现如果说是直接请求后台接口的图片地址就能显示, 但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候,图片不能显示. 解决方案 1 当在给数据MyimgSrc 设置绝对路径或者是相对路径时应该使用require引

  • vue项目打包发布后接口报405错误的解决

    目录 vue项目打包发布后接口报405 vue项目打包之后接口出现错误问题 错误信息 关键代码 解决方式 vue项目打包发布后接口报405 vue项目前端做了代理打包后后台不识别报405 not allowed vue.config.js文件配置   devServer: {     // host: "0.0.0.0", //项目运行时的本地地址     // port: 8880, // 端口号     //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为

  • vue实现换肤功能

    公司项目要实现vue项目换肤功能,要求,考虑到最节省时间的就是写两套css,一套light.css,一套dark.css,然后切换css 一.实现思路 切换选中的皮肤状态(light,或者dark)存储在sessionStorage中,监听sessionStorage数据变化,切换index.html中引入的css文件 二.实现过程 1.在main.vue添加:  <p style="display: inline-block;"> 切换主题:</p>   &l

  • vue项目打包部署_nginx代理访问方法详解

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了

  • vue-cli或vue项目利用HBuilder打包成移动端app操作

    一.测试项目是否可以正确运行 指令:npm run dev 1.首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 二.修改路径 (assetsPublicPath: './') 1. 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置) 2. 检查下assetsRoot: path.resolve(__dirname, '-/dist'), assetsSubDirectory: 'static',

  • vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作

    Vue项目通过Hbuild打包为APP后,静态文件正常显示,但并没有像开发时那样请求到数据. 这是为什么?因为APP并没有跨域,不存在跨域一说. 我们在开发的时候,js在不同的域之间进行数据传输或通信,所以会给项目设置代理来跨域 config下的index.js 比如这个 proxyTable: { '/api':{ target: 'http://XXX/xxx/v3', changeOrigin: true, pathRewrite: { '^/api': '' } } } 在开发时这样做是

随机推荐