Wajah ekspor web ke excel

Beberapa waktu lalu, saya dan tim pernah melakukan UX Research untuk mengetahui pengalaman user dalam memakai website kami. Banyak masukan dari para user yang serupa, yaitu adanya fitur untuk mengekspor data yang ada di web app ke dalam bentuk file spreadsheet yang dapat dibuka dengan aplikasi Microsoft Excel, LibreOffice Calc, dan sebagainya. Saya menemukan solusi untuk masalah tersebut, yaitu data yang diekspor dapat berbentuk CSV, dan dapat dibuka oleh user dengan aplikasi pengolah spreadsheet favorit

Namun, ternyata tidak semua user mengerti bagaimana cara mengimpor file CSV. Sebagai pengguna Linux full-time selama 4 tahun, saya tidak masalah dengan membuka file CSV pada laptop saya karena ketika file CSV dibuka, ada pop-up wizard dari LibreOffice untuk memilih karakter delimiter, mulai dari baris berapa, dan sebagainya. Sepertinya, Microsoft Office memiliki langkah-langkah tersendiri untuk mengimpor file CSV, karena saya dan tim mendapat komplain bahwa “file excelnya tidak rapi” dan diberikan screenshot bahwa file masih dalam bentuk CSV yang masih memiliki separator batch koma

Saya ingin membuat user lebih nyaman, dengan cara membuat user tidak perlu melakukan langkah-langkah tambahan untuk melihat data yang mereka kelola dengan baik. Oleh karena itu, saya mencari solusi yang lebih baik yang cocok dengan server berbasis Express

SheetJS adalah library berbasis JavaScript yang digunakan untuk membaca dan menulis berbagai macam format spreadsheet. SheetJS menyediakan edisi Community dan Pro, tergantung kebutuhan. Tapi, jika hanya untuk sekadar mengekspor data menjadi file spreadsheet, menurut saya edisi Community saja sudah cukup. Cara menginstallnya mudah, Anda dapat menginstall SheetJS dengan menggunakan npm pada project Anda

Seperti tutorial sebelumnya, Anda dapat menggunakan express-generator untuk inisiasi backend server

❯ npx express-generator sheetjs-example          
npx: installed 10 in 1.094swarning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional optionscreate : sheetjs-example/
   create : sheetjs-example/public/
   create : sheetjs-example/public/javascripts/
   create : sheetjs-example/public/images/
   create : sheetjs-example/public/stylesheets/
   create : sheetjs-example/public/stylesheets/style.css
   create : sheetjs-example/routes/
   create : sheetjs-example/routes/index.js
   create : sheetjs-example/routes/users.js
   create : sheetjs-example/views/
   create : sheetjs-example/views/error.jade
   create : sheetjs-example/views/index.jade
   create : sheetjs-example/views/layout.jade
   create : sheetjs-example/app.js
   create : sheetjs-example/package.json
   create : sheetjs-example/bin/
   create : sheetjs-example/bin/wwwchange directory:
     $ cd sheetjs-exampleinstall dependencies:
     $ npm installrun the app:
     $ DEBUG=sheetjs-example:* npm start

Setelah itu, masuk ke dalam direktori sheetjs-example dan install library SheetJS

Dalam implementasi ini, saya akan mencontohkan pembuatan file spreadsheet dari dua macam data. Data yang berbentuk array of array, dan array of object

Bagian 1 dari 2. Data berbentuk larik dari larik

Buka file route/index. js dan tambahkan satu rute dengan nama /excel/aoa. Lalu, perhatikan kodingan dibawah ini

const express = require("express");
const router = express.Router();
const XLSX = require("xlsx");
const path = require("path");
const fs = require("fs");/* GET Excel files from AOA data Files */
router.get("/excel/aoa", function (req, res) {
  // Definisikan header
  const header = ["ID", "Nama", "Umur"];// Definisikan data
  const data = [
    ["1", "Denny", "24"],
    ["2", "Aditya", "25"],
    ["3", "Pradipta", "26"],
    ["4", "Ardhie", "27"],
    ["5", "Putra", "28"],
    ["6", "Prananta", "29"],
  ];// Definisikan rows untuk ditulis ke dalam spreadsheet
  const rows = [header, ...data];// Buat Workbook
  const fileName = "AOA_XLS";
  let wb = XLSX.utils.book_new();
  wb.Props = {
    Title: fileName,
    Author: "Denny Pradipta",
    CreatedDate: new Date(),
  };// Buat Sheet
  wb.SheetNames.push("Sheet 1");// Buat Sheet dengan Data
  let ws = XLSX.utils.aoa_to_sheet(rows);
  wb.Sheets["Sheet 1"] = ws;
  __dirname;// Cek apakah folder downloadnya sudah ada
  const downloadFolder = path.resolve(__dirname, "../downloads");
  if (!fs.existsSync(downloadFolder)) {
    fs.mkdirSync(downloadFolder);
  }try {
    // Simpan filenya
    XLSX.writeFile(
      wb,
      `${downloadFolder}${path.sep}${fileName}.xls`
    );res.download(`${downloadFolder}${path.sep}${fileName}.xls`);
  } catch (e) {
    console.log(e.message);
    throw e;
  }
});module.exports = router;

Secara berurutan, langkah-langkah yang dilakukan adalah menentukan baris header dan data yang akan diekspor, lalu header dan data dimasukkan ke dalam satu array yang bernama rows. Kemudian, workbook mulai dibuat dengan menggunakan SheetJS

Pada saat workbook selesai dibuat, ditambahkan satu lembar pada workbook dengan nama “Sheet 1” beserta data dari baris variabel menggunakan metode XLSX. utilitas. aoa_to_sheet(). Setelah itu, akan dilakukan pengecekan apakah folder download sudah ada atau belum. Jika belum maka otomatis akan dibuat. Jika tidak, maka file spreadsheet akan dibuat di dalam folder unduhan. File yang telah dibuat akan diberikan kepada user

Anda dapat melakukan tes dengan menjalankan server Express dengan perintah npm run start dan membuka http. // localhost. 3000/excel/yy. Apakah Anda mendapatkan dialog untuk mendownload file Anda? . Jika sesuai dengan gambar dibawah, berarti so far so good

Bagian 2 dari 2. Data berbentuk larik objek

Selama ini jika saya mengonsumsi API atau mengambil data dari hasil query database, sering kali data yang saya termima berbentuk array of objects. Oleh karena itu, mari kita mendesain API untuk mendownload file spreadsheet dari data berbentuk array of objects. Sama seperti sebelumnya, namun kali ini dengan endpoint /excel/aoo

const express = require("express");
const router = express.Router();
const XLSX = require("xlsx");
const path = require("path");
const fs = require("fs");/* GET Excel files from AOA data Files */
router.get("/excel/aoa", function (req, res) {
   ................
});/* GET Excel files from AOO data Files */
router.get("/excel/aoo", function (req, res) {
  // Definisikan data
  const data = [
    { id: 1, name: "Denny", age: 24 },
    { id: 2, name: "Aditya", age: 25 },
    { id: 3, name: "Pradipta", age: 26 },
    { id: 4, name: "Ardhie", age: 27 },
    { id: 5, name: "Putra", age: 28 },
    { id: 6, name: "Prananta", age: 29 },
  ];// Buat Workbook
  const fileName = "AOO_XLS";
  let wb = XLSX.utils.book_new();
  wb.Props = {
    Title: fileName,
    Author: "Denny Pradipta",
    CreatedDate: new Date(),
  };// Buat Sheet
  wb.SheetNames.push("Sheet 1");// Buat Sheet dengan Data
  let ws = XLSX.utils.json_to_sheet(data);
  wb.Sheets["Sheet 1"] = ws;// Cek apakah folder downloadnya ada
  const downloadFolder = path.resolve(__dirname, "../downloads");
  if (!fs.existsSync(downloadFolder)) {
    fs.mkdirSync(downloadFolder);
  }try {
    // Simpan filenya
    XLSX.writeFile(wb, `${downloadFolder}${path.sep}${fileName}.xls`);res.download(`${downloadFolder}${path.sep}${fileName}.xls`);
  } catch (e) {
    console.log(e.message);
    throw e;
  }
});module.exports = router;

Secara konsep sama dengan cara sebelumnya, hanya saja jika menggunakan array of objects, kita tidak perlu mendefinisikan header karena secara otomatis akan mengambil object key sebagai headernya. Jika sudah selesai, maka Anda dapat membuka http. // localhost. 3000/excel/aplikasi. Apakah Anda mendapatkan dialog untuk mendownload file Anda? . Jika sesuai dengan gambar dibawah, berarti ciuman berhasil

SheetJS merupakan library berbasis JavaScript yang digunakan untuk membaca dan menulis berbagai macam format spreadsheet. Seperti yang selalu saya bilang pada artikel-artikel sebelumnya, artikel ini hanya membahas sebatas ‘pinggir kolam’. Selalu ada lebih dari yang terlihat. Maka dari itu, jangan berhenti disini, dan cobalah untuk mengeksplorasi lebih dalam library ini

Anda dapat melihat sumber kode proyek ini di https. //github. com/dennypradipta/sheetjs-contoh. Terima kasih telah membaca artikel ini sampai habis, sampai jumpa di artikel selanjutnya

Hyperjump adalah perusahaan sumber terbuka pertama yang menyediakan layanan keunggulan teknik. Kami bertujuan untuk membangun dan mengkomersialkan alat sumber terbuka untuk membantu perusahaan merampingkan, menyederhanakan, dan mengamankan aspek terpenting dari praktik DevOps modernnya.

Langkah import data dari web di Excel?

Langkah Langkah Membuat Link di Excel?

Bagaimana wajah mengcopy data di Excel?

Langkah menyimpan file dengan memberi nama file baru di Microsoft Excel?