亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

在Vue中使用xlsx組件實現(xiàn)Excel導出功能的步驟詳解

 更新時間：2023年10月25日 11:31:31   作者：sg_knight  
在現(xiàn)代Web應用程序中,數據導出到Excel格式是一項常見的需求,Vue.js是一種流行的JavaScript框架,允許我們構建動態(tài)的前端應用程序,本文將介紹如何使用Vue.js和xlsx組件輕松實現(xiàn)Excel數據導出功能,需要的朋友可以參考下

1、項目設置

首先，在控制臺執(zhí)行以下命令安裝xlsx組件；

npm install xlsx --save
 
或
 
yarn add xlsx --save

然后，在vue項目中引入xls組件；

2、準備數據

要導出到Excel，您需要有數據。您可以使用本地數據或從API獲取數據。在本示例中，我們將使用本地數據：

 
exportData: [
  { name: "John", age: 30, city: "New York" },
  { name: "Alice", age: 25, city: "Los Angeles" },
  { name: "Bob", age: 35, city: "Chicago" }
]

3、實現(xiàn)導出功能

創(chuàng)建導出到Excel的方法。這個方法將觸發(fā)Excel文件的生成和下載：

exportToExcel() {
    const worksheet = XLSX.utils.json_to_sheet(this.exportData);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
    XLSX.writeFile(workbook, "exported-data.xlsx");
}

這個方法使用xlsx組件將數據轉換為Excel工作表，然后創(chuàng)建一個工作簿并將工作表添加到工作簿中。最后，它使用XLSX.writeFile方法將工作簿保存為名為"exported-data.xlsx"的Excel文件。

4、設置列寬自適應

根據導出數據的長度，通過遍歷計算每列的最大長度，然后通過worksheet['!cols']方法設置每列寬度；

// 設置列寬
  exportData.forEach((row, rowIndex) => {  
    row.forEach((cell, cellIndex) => { 
      const list = arrData.map(item => {
        const val = item[cellIndex] as string;
        if(isEmptyString(val)){
          return 1;
        } else if(val.toString().charCodeAt(0) > 255){ // 判斷是否有中文
          return val.toString().length * 2
        } else{
          return val.toString().length;
        }
      });
      const maxLength = Math.max(...list);  
      const width = maxLength * 1.1; // 根據實際內容長度自動調整列寬  
      if(!worksheet["!cols"]) worksheet["!cols"] = [];
      if(!worksheet["!cols"][cellIndex]) worksheet["!cols"][cellIndex] = {wch: 8};
      worksheet['!cols'][cellIndex].wch = width; // 使用worksheet的 '!cols' 來設置列寬
    });
  });

5、設置合并單元格

通過worksheet["!merges"]方法可以設置合并單元格；

// 合并單元格
  merges.forEach((item) => {
    if(!worksheet["!merges"]){
      worksheet["!merges"] = [];
    };
    worksheet["!merges"].push(item);
    // worksheet["!merges"].push({
    //   s: { r: 2, c: 1 }, // s ("start"): c = 1 r = 2 -> "B3"
    //   e: { r: 3, c: 4 }  // e ("end"):   c = 4 r = 3 -> "E4"
    // });
  });

6、設置導出Excel表格的樣式

xlsx組件庫是不支持設置Excel表格樣式的，但是可以通過引入xlsx-style-vite組件庫來實現(xiàn)樣式的設置；然后通過file-saver導出文件；

6.1 安裝并引入xlsx-style-vite和file-saver組件

yarn add xlsx-style-vite --save
 
yarn add file-saver --save
import XLSXStyle from 'xlsx-style-vite';
import XLSX_SAVE from 'file-saver';

其中 xlsx-style-vite組件是xlsx-style組件的vite版本，用于解決在vite下引入xlsx-style異常的問題；

6.2 設置單元格居中

遍歷所有單元格，然后通過worksheet[column].s方法設置每個單元格的樣式；

exportData.forEach((row, rowIndex) => {  
    row.forEach((cell, cellIndex) => { 
      // 設置所有單元格居中
      let column = utils.encode_cell({c: cellIndex, r: rowIndex});      
          worksheet[column].s = {
            alignment: {
              horizontal: 'center',
              vertical: 'center',
              wrapText: false, // 自動換行
            },
          }        
    });
  });

6.3 設置單元格背景色和字體

exportData.forEach((row, rowIndex) => {  
    row.forEach((cell, cellIndex) => { 
      // 設置所有單元格居中
      let column = utils.encode_cell({c: cellIndex, r: rowIndex});
      if(worksheet[column]){
        // 設置背景色、加粗展示
          worksheet[column].s = {
            font: {
              name: "微軟雅黑",
              sz: 16,
              color: { rgb: "000000" },
              bold: true,
              italic: false,
              underline: false,
            },
            fill: {
              fgColor: { rgb: "C5D9F1" },
            },
            alignment: {
              horizontal: 'center',
              vertical: 'center',
              wrapText: false, // 自動換行
            },
          }
        }
      }
    });
  });

6.4 設置單元格邊框

  //單元格外側框線
  const borderAll = {
    top: {
      style: "thin",
    },
    bottom: {
      style: "thin",
    },
    left: {
      style: "thin",
    },
    right: {
      style: "thin",
    },
  };
 
  // 設置單元格邊框
  arrData.forEach((row, rowIndex) => {  
    row.forEach((cell, cellIndex) => { 
      let column = utils.encode_cell({c: cellIndex, r: rowIndex});
      if(worksheet[column]){       
          worksheet[column].s = {
            border: borderAll,
          }
        }
      }
    });
  });

6.5 導出文件

必須通過file-saver組件導出Excel文件，不能通過xlsx組件的writeFile方法導出文件，否則樣式無法生效；

const wbout = XLSXStyle.write(workbook, {
    type: 'binary',
    bookType: 'xlsx',
  });
  XLSX_SAVE.saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream',
    }),
    'exported-data.xlsx',
  );
 
 
// 數據轉換
function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

7、完整代碼示例

import * as xlsx from 'xlsx';
import type { WorkBook } from 'xlsx';
import type { JsonToSheet, AoAToSheet } from './typing';
import XLSXStyle from 'xlsx-style-vite';
import XLSX_SAVE from 'file-saver';
import { isEmptyString } from '@/utils/table';
 
const { utils, writeFile } = xlsx;
 
const DEF_FILE_NAME = 'excel-list.xlsx';
 
export function aoaToSheetXlsx<T = any>({
  data,
  header,
  filename = DEF_FILE_NAME,
  write2excelOpts = { bookType: 'xlsx' },
  merges = [],
}: AoAToSheet<T>) {
  const arrData = [...data];  
  if (header) {    
    arrData.unshift(header);
  }
 
  const worksheet = utils.aoa_to_sheet(arrData);
 
  /* add worksheet to workbook */
  const workbook: WorkBook = {
    SheetNames: [filename],
    Sheets: {
      [filename]: worksheet,
    },
  };
 
  //單元格外側框線
  const borderAll = {
    top: {
      style: "thin",
    },
    bottom: {
      style: "thin",
    },
    left: {
      style: "thin",
    },
    right: {
      style: "thin",
    },
  };
 
  // 設置列寬
  arrData.forEach((row, rowIndex) => {  
    row.forEach((cell, cellIndex) => { 
      const list = arrData.map(item => {
        const val = item[cellIndex] as string;
        if(isEmptyString(val)){
          return 1;
        } else if(val.toString().charCodeAt(0) > 255){ // 判斷是否有中文
          return val.toString().length * 2
        } else{
          return val.toString().length;
        }
      });
      const maxLength = Math.max(...list);  
      const width = maxLength * 1.1; // 根據實際內容長度自動調整列寬  
      if(!worksheet["!cols"]) worksheet["!cols"] = [];
      if(!worksheet["!cols"][cellIndex]) worksheet["!cols"][cellIndex] = {wch: 8};
      worksheet['!cols'][cellIndex].wch = width; // 使用worksheet的 '!cols' 來設置列寬
 
      // 設置所有單元格居中
      let column = utils.encode_cell({c: cellIndex, r: rowIndex});
      if(worksheet[column]){
        if(rowIndex === 0) {  // 標題行設置背景色、加粗展示
          worksheet[column].s = {
            border: borderAll,
            font: {
              // name: "微軟雅黑",
              // sz: 16,
              color: { rgb: "000000" },
              bold: true,
              italic: false,
              underline: false,
            },
            fill: {
              fgColor: { rgb: "C5D9F1" },
            },
            alignment: {
              horizontal: 'center',
              vertical: 'center',
              wrapText: false, // 自動換行
            },
          }
        } else {
          worksheet[column].s = {
            alignment: {
              horizontal: 'center',
              vertical: 'center',
              wrapText: false, // 自動換行
            },
          }
        }
      }
    });
  });  
 
  // 合并單元格
  merges.forEach((item) => {
    if(!worksheet["!merges"]){
      worksheet["!merges"] = [];
    };
    worksheet["!merges"].push(item);
    // worksheet["!merges"].push({
    //   s: { r: 2, c: 1 }, // s ("start"): c = 1 r = 2 -> "B3"
    //   e: { r: 3, c: 4 }  // e ("end"):   c = 4 r = 3 -> "E4"
    // });
  });
 
  const wbout = XLSXStyle.write(workbook, {
    type: 'binary',
    bookType: 'xlsx',
  });
  XLSX_SAVE.saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream',
    }),
    `${filename}.${write2excelOpts.bookType}`,
  );
 
  /* output format determined by filename */
  // writeFile(workbook, filename, write2excelOpts);
  /* at this point, out.xlsb will have been downloaded */
}
 
// 數據轉換
function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

以上就是在Vue中使用xlsx組件實現(xiàn)Excel導出功能的步驟詳解的詳細內容，更多關于Vue xlsx組件實現(xiàn)Excel導出的資料請關注腳本之家其它相關文章！

相關文章

  • element-ui中el-upload多文件一次性上傳的實現(xiàn)

    element-ui中el-upload多文件一次性上傳的實現(xiàn)

    這篇文章主要介紹了element-ui中el-upload多文件一次性上傳的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12
  • 基于vue-ssr服務端渲染入門詳解

    基于vue-ssr服務端渲染入門詳解

    這篇文章主要介紹了基于vue-ssr服務端渲染入門詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • vue中的文本空格占位符說明

    vue中的文本空格占位符說明

    這篇文章主要介紹了vue中的文本空格占位符說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-06-06
  • 基于Vue3和Element Plus實現(xiàn)自動導入功能

    基于Vue3和Element Plus實現(xiàn)自動導入功能

    在 Vue 3 項目中,結合  Element Plus  實現(xiàn)自動導入可以顯著減少代碼量,提升開發(fā)效率,Element Plus 提供了官方的自動導入插件  unplugin-vue-components  和  unplugin-auto-import,以下是如何配置和使用的詳細步驟,需要的朋友可以參考下
    2025-03-03
  • vue嵌套組件傳參實例分享

    vue嵌套組件傳參實例分享

    這篇文章主要介紹了vue嵌套組件傳參實例分享,本文以一個vue遞歸組件為例,探究多層嵌套后事件無法觸發(fā)的問題,我們可以通過查看一Demo,便于快速了解,下文列舉例子需要的小伙伴可以參考一下
    2022-04-04
  • 如何利用vue實現(xiàn)登陸界面及其跳轉詳解

    如何利用vue實現(xiàn)登陸界面及其跳轉詳解

    在開發(fā)中我們經常遇到這樣的需求,需要用戶直接點擊一個鏈接進入到一個頁面,下面這篇文章主要給大家介紹了關于如何利用vue實現(xiàn)登陸界面及其跳轉的相關資料,需要的朋友可以參考下
    2023-04-04
  • vue用遞歸組件寫樹形控件的實例代碼

    vue用遞歸組件寫樹形控件的實例代碼

    最近在vue項目中遇到需要用樹形控件的部分，比如導航目錄是不確定的，所以必須要用樹形結構，下面腳本之家小編給大家?guī)砹藇ue用遞歸組件寫樹形控件的實例代碼，需要的朋友參考下吧
    2018-07-07
  • vue3實現(xiàn)表格編輯和刪除功能的示例代碼

    vue3實現(xiàn)表格編輯和刪除功能的示例代碼

    這篇文章主要為大家詳細介紹了vue3實現(xiàn)表格編輯和刪除功能的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2024-01-01
  • vue+antv實現(xiàn)雷達圖的示例代碼

    vue+antv實現(xiàn)雷達圖的示例代碼

    這篇文章主要介紹了vue+antv實現(xiàn)雷達圖，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-12-12
  • 利用Vue3+Element?Plus封裝公共表格組件(帶源碼)

    利用Vue3+Element?Plus封裝公共表格組件(帶源碼)

    最近公司項目中頻繁會使用到table表格,而且前端技術這一塊也用到了vue3來開發(fā),所以基于element plus table做了一個二次封裝的組件,這篇文章主要給大家介紹了關于利用Vue3+Element?Plus封裝公共表格組件的相關資料,需要的朋友可以參考下
    2023-11-11

最新評論