vue 前端预览 Excel 表

最新推荐文章于 2025-05-19 17:48:48 发布

一个假的前端男

最新推荐文章于 2025-05-19 17:48:48 发布

阅读量1.2k

点赞数 8

CC 4.0 BY-SA版权

文章标签：前端 vue.js excel

本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/136400501

本文介绍了如何在Vue项目中通过npm安装并异步加载Luckysheet库，包括CDN加载方式，以及如何在页面上使用它来处理Excel文件，包括下载文件和渲染到表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装依赖包官网

npm i luckyexcel

template 模板

<!-- 用于渲染表格的容器 -->
<div id="luckysheet" style='width:100vw;height:100vh'></div>

二、加载

异步加载及

import LuckyExcel from 'luckyexcel';

/* 下列代码加载 cdn 文件，你也可以在 public 文件夹在 html 中引入 */
// 封装加载 src 文件方法
function asynLoad(src, isCss = false) {
   
  return new Promise(res => {
   
    let el;
    if (isCss) {
   
      el = document.createElement('link');
      el.rel = 'stylesheet';
      el.href = src;
    } else {
   
      el = document.createElement('script');
      el.src = src;
    }
    document.documentElement.appendChild(el);
    el.onload = el.onreadystatechange = function() {
   
      if (
        !this.readyState