浅析Vue3中Excel下载模板并导入数据功能的实现_Vue.js

上传功能

代码一

<el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
    <!--
    action 使用 axios 上传，#号
    limit 只允许上传一个文件
    accept 限制格式
    on-progress 上传中回调方法，做上传禁用的功能
    disabled 禁用开关
    auto-upload 禁止自动上传
    on-change 上传后的处理
    -->
    <el-upload action="#" :limit="1" accept=".xlsx, .xls" :on-progress="handlefileprogress"
               :disabled="upload.isuploading" :auto-upload="false" drag
               :on-change="handlechangeupload">

        <!--icon 标签-->
        <el-icon class="el-icon--upload">
            <uploadfilled/>
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

        <template #tip>
            <div class="el-upload__tip text-center">
                <span>仅允许导入xls、xlsx格式文件。</span>
                <!--下载模版-->
                <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                         @click="importtemplate">
                    下载模板
                </el-link>
            </div>
        </template>
    </el-upload>
    <template #footer>
        <div class="dialog-footer">
            <!--确定后下载-->
            <el-button type="primary" @click="submitfileform">确 定</el-button>
            <el-button @click="upload.open = false">取 消</el-button>
        </div>
    </template>
</el-dialog>

代码二

<el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
    <el-upload :action="upload.url" ref="uploadref" :limit="1" accept=".xlsx, .xls"
               :on-progress="handlefileprogress"
               :disabled="upload.isuploading" :auto-upload="false" drag
               :headers="upload.headers" :on-success="handlefilesuccess">

        <el-icon class="el-icon--upload">
            <uploadfilled/>
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

        <template #tip>
            <div class="el-upload__tip text-center">
                <span>仅允许导入xlsx格式文件。</span>
                <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                         @click="importtemplate">
                    下载模板
                </el-link>
            </div>
        </template>
    </el-upload>
    <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="submitfileform">确 定</el-button>
            <el-button @click="upload.open = false">取 消</el-button>
        </div>
    </template>
</el-dialog>

/*** 用户导入参数 */
const upload = ref({
    open: false,
    title: '设备导入',
    // 是否禁用上传
    isuploading: false,
    headers: { authorization: 'bearer ' + gettoken() },
    url: import.meta.env.vite_app_base_api + '/ar_check/device/importdata'
})

// 打开导入
function handleteamimport() {
    upload.value.open = true
}

// 文件上传中
function handlefileprogress() {
    upload.value.isuploading = true
}

// 文件上传完成
function handlefilesuccess(response, file) {
    upload.value.open = false
    upload.value.isuploading = false
    proxy.$refs['uploadref'].handleremove(file)
    proxy.$alert('<div style=\'overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;\'>' +
        response.msg + '</div>', '导入结果', { dangerouslyusehtmlstring: true })
    getlist()
}

// 下载模板
function importtemplate() {
    proxy.download('ar_check/device/importtemplate', {}, `device_template_${new date().gettime()}.xlsx`)
}

// 确定上传
async function submitfileform() {
    proxy.$refs.uploadref.submit()
}

介绍一下 poi ooxml 的使用

首先需要创建一个工作薄，这里有几个注意事项

hssf －提供读写microsoft excel xls格式档案的功能。
xssf －提供读写microsoft excel ooxml xlsx格式档案的功能。
hwpf －提供读写microsoft word doc97格式档案的功能。
xwpf －提供读写microsoft word doc2003格式档案的功能。
hslf －提供读写microsoft powerpoint格式档案的功能。
hdgf －提供读microsoft visio格式档案的功能。
hpbf －提供读microsoft publisher格式档案的功能。
hsmf －提供读microsoft outlook格式档案的功能。

在工作页创建行以及单元格。

// 新建一个工作簿
workbook workbook = new xssfworkbook();
// 创建sheet页
sheet sheet = workbook.createsheet();

// 在第三行开始写
row row = sheet.createrow(3);
cell cell = row.createcell(0);
cell.setcellvalue("哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈");

// 合并行，表示表的第三列，结束第三列，合并 0 - 6 行
sheet.addmergedregion(new cellrangeaddress(3, 3, 0, 8));

// 创建单元格样式
cellstyle cellstyle = workbook.createcellstyle();
// 设置单元格居中方式---左对齐
cellstyle.setalignment(horizontalalignment.left);

// 应用单元格样式
cell.setcellstyle(cellstyle);

// 将数据写入到文件中
fileoutputstream fout = new fileoutputstream("d:\\downloads\\example.xlsx");
workbook.write(fout);
fout.close();
workbook.close();

设置单元格格式以及字体样式

// 创建单元格样式
cellstyle cellstyle2 = workbook.createcellstyle();
// 设置单元格居中方式---居中
cellstyle2.setalignment(horizontalalignment.center);
// 设置单元格颜色--灰色
cellstyle2.setfillforegroundcolor(indexedcolors.grey_50_percent.getindex());
// 使用单一颜色填充
cellstyle2.setfillpattern(fillpatterntype.solid_foreground);

// 字体格式
font font = workbook.createfont();
// 加粗
font.setbold(true);
// 设置颜色--白色
font.setcolor(indexedcolors.white.getindex());
// 将字体设置到样式上
cellstyle2.setfont(font);

// 最后单元格使用样式
t1.setcellstyle(cellstyle2);

最后输出到指定位置

// 创建一个文件输出流，用于将工作簿写入文件
fileoutputstream fout = new fileoutputstream("d:\\downloads\\example.xlsx");
// 将工作簿写入文件流
workbook.write(fout);
// 关闭文件流
fout.close();
// 关闭工作簿
workbook.close();

获取 excel 的图片

图片是独立的，根据单元格的位置获取

inputstream inputstream = files.newinputstream(paths.get("d:\\downloads\\device_template_1714287622392.xlsx"));
xssfworkbook workbook = new xssfworkbook(inputstream);

// 获取第一个 sheet 表
xssfsheet sheet = workbook.getsheetat(0);
if (sheet == null) {
    throw new ioexception("损坏的文件！");
}

// 获取绘图包
xssfdrawing drawing = sheet.getdrawingpatriarch();
if (drawing != null) {
    // 获取所有图形形状
    list<xssfshape> shapes = drawing.getshapes();
    for (xssfshape shape : shapes) {

        // 形状获取对应的图片数据
        xssfpicture picture = (xssfpicture) shape;
        xssfpicturedata picturedata = picture.getpicturedata();

        //图片形状在工作表中的位置, 所在行列起点和终点位置
        xssfclientanchor anchor = (xssfclientanchor) shape.getanchor();

        // 行
        short col1 = anchor.getcol1();
        // 列
        int row1 = anchor.getrow1();
        //文件扩展名
        string suffix = picturedata.suggestfileextension();
        // 文件格式
        string mimetype = picturedata.getmimetype();
        // 文件数据
        byte[] data = picturedata.getdata();

        // 转换成 multipartfile 进行文件上传，参数一和参数二是文件名，参数三是类型，参数四是字节数据
        multipartfile multipartfile = new mockmultipartfile("", "", mimetype, data);
    }
}

下载模板功能实现

首先后端完成上面的excel 文件格式内容等

前端调用 springmvc 接口

import { saveas } from 'file-saver'
try {
    const downloadloadinginstance = elloading.service({ text: '正在下载数据，请稍候', background: 'rgba(0, 0, 0, 0.7)' })
    // 发送 post 请求到指定的 url，获取响应数据
    const data = await service.post(url, {}, {
        // 设置请求头为 'application/x-www-form-urlencoded'
        headers: { 'content-type': 'application/x-www-form-urlencoded' },
        // 设置响应类型为 blob
        responsetype: 'blob'
    })
    // 如果响应数据存在
    if (data) {
        // 检查响应数据是否为 blob 类型---是否是json
        const isblob = blobvalidate(data)
        if (isblob) {
            // 如果是 blob 类型，则创建 blob 对象并保存为文件
            const blob = new blob([data])
            saveas(blob, filename)
        }
    }
    // 关闭加载动画
    downloadloadinginstance.close()
} catch (error) {
    console.error(error)
    // 显示下载文件错误信息
    elmessage.error('下载文件出现错误，请联系管理员！')
    // 关闭加载动画
    downloadloadinginstance.close()
}

上传导入

需要创建一个输入流来读取 execel 文件。

getlastrownum 获取有文本内容的最后一行列的索引，因为我这里前五行是解释内容，所以 == 5 表示没有数据。

如果是前端传递的，要这样写 multipartfile 的 getinputstream 方法获取流

inputstream inputstream = files.newinputstream(paths.get("d:\\downloads\\team_template_1714287622392.xlsx"));
workbook workbook = workbookfactory.create(inputstream);
// 获取第一个 sheet 表
sheet sheet = workbook.getsheetat(0);
if (sheet == null) {
    throw new ioexception("损坏的文件！");
}
if (sheet.getlastrownum() == 5) {
    throw new ioexception("导入班组数据不能为空！");
}

由于 poi ooxml 读取数据需要指定类型很麻烦，我做了一个方法转换

/**
 * 将单元格的值以字符串形式返回。
 *
 * @param cell 单元格对象
 * @return 字符串形式的单元格值，如果单元格为 null，则返回空字符串
 */
public static string getcellvalueasstring(cell cell) {
    if (cell == null) {
        return "";
    }

    switch (cell.getcelltype()) {
        case numeric:
            // 如果单元格类型为数字，将数字转换为字符串并去除空格
            return string.valueof((long) cell.getnumericcellvalue()).trim();
        case boolean:
            // 如果单元格类型为布尔值，将布尔值转换为字符串并去除空格
            return string.valueof(cell.getbooleancellvalue()).trim();
        case string:
            // 如果单元格类型为字符串，直接返回字符串并去除空格
            return cell.getstringcellvalue().trim();
        case formula:
            // 如果单元格是公式，将计算结果作为字符串返回，并去除空格
            return cell.getcellformula().trim();
        case blank:
            // 如果单元格为空，返回空字符串
            return "";
        case error:
            // 如果单元格是错误类型，返回错误码作为字符串
            return string.valueof(cell.geterrorcellvalue());
        default:
            // 其他类型的单元格返回空字符串
            return "";
    }
}

以上就是浅析vue3中excel下载模板并导入数据功能的实现的详细内容，更多关于vue3 excel下载模板并导入数据的资料请关注代码网其它相关文章！