צור גיליון אלקטרוני מבוסס דפדפן: ספריות, נוסחאות וייצוא

יצירת גיליון אלקטרוני מבוסס דפדפן: ספריות, נוסחאות וייצוא

יש לנו ניסיון של למעלה מ-5 שנים ביישום רכיבי גיליונות אלקטרוניים עבור עשרות לקוחות, תוך הבטחת פתרונות אמינים ויעילים. דמיינו פיתוח CRM שבו יש לחשב סכומים בזמן אמת עבור כל שורה, ומשתמשים מעתיקים נתונים מ-Excel ומדביקים אותם לטבלה. גיליון אלקטרוני הוא אחד מרכיבי ה-UI המורכבים ביותר: וירטואליזציה של שורות, ניווט מקלדת, נוסחאות, מיזוג תאים. במשך למעלה מחמש שנים, יישמנו עשרות פרויקטים כאלה על React ו-Vue. במאמר זה, נפרק כיצד לבחור ספרייה מוכנה ולשלב אותה עם נוסחאות HyperFormula כדי לקבל חוויית Excel מלאה בדפדפן. פיתוח גיליון אלקטרוני מאפס יכול לעלות $10,000–$30,000, בעוד ששילוב פתרון מוכן מתחיל מ-$1,000. החיסכון ברור. שירותי האינטגרציה שלנו מתחילים ב-$1,000, וחוסכים לכם עד $29,000 בהשוואה לפיתוח מותאם אישית.

יתרונות של ספריות מוכנות על פני פיתוח מותאם אישית

גיליון אלקטרוני מותאם אישית דורש טיפול במאות מקרי קצה: קלט IME, מסננים אוטומטיים, עיצוב מותנה. ספריות כמו Handsontable ו-Fortune-Sheet כבר עברו את זה. לדוגמה, Handsontable מכיל למעלה מ-300 שיטות API, ול-Fortune-Sheet יש 200+ פונקציות. כתיבת זה מאפס לוקחת 3–6 חודשי פיתוח. שילוב פתרון מוכן לוקח 2–3 ימים. יתר על כן, ספריות פופולריות תומכות בווירטואליזציה: 10,000 שורות מוצגות ב-50 אלפיות השנייה, מהיר פי 10 מיישום נאיבי. לפי תיעוד Handsontable, רישיון מסחרי מתחיל ב-$149 לחודש, מה שמחזיר את ההשקעה מהר יותר מאשר פיתוח פתרון משלך.

השוואת ספריות: איזו מתאימה לפרויקט שלך?

אם אתה צריך נוסחאות מורכבות ואינטגרציה עם Excel, הבחירה היא Handsontable + HyperFormula. אם הפרויקט שלך הוא קוד פתוח או בעל תקציב מוגבל, Fortune-Sheet נותן לך 80% מהפונקציונליות בחינם.

שילוב נוסחאות עם HyperFormula

HyperFormula הוא מנוע נוסחאות בקוד פתוח (MIT) מצוות Handsontable. הוא תומך ב-386 פונקציות, כולל VLOOKUP, SUMIF, DATE. אינטגרציה עם Handsontable אורכת יומיים.

npm install hyperformula @handsontable/react @fortune-sheet/react xlsx 

import { HyperFormula } from 'hyperformula'
import { HotTable } from '@handsontable/react'

function SpreadsheetWithFormulas() {
  const hfInstance = HyperFormula.buildEmpty({
    licenseKey: 'gpl-v3',
  })

  return (
    <HotTable
      formulas={{
        engine: hfInstance,
        sheetName: 'Sheet1',
      }}
      data={[
        ['Продукт', 'Кол-во', 'Цена', 'Сумма'],
        ['Товар А', 10, 150, '=B2*C2'],
        ['Товар Б', 5, 300, '=B3*C3'],
        ['', '', 'Итого:', '=SUM(D2:D3)'],
      ]}
    />
  )
}

Fortune-Sheet תומך גם בנוסחאות ישירות מהקופסה:

npm install @fortune-sheet/react 

import { Workbook } from '@fortune-sheet/react'
import '@fortune-sheet/react/dist/index.css'

function FortuneSpreadsheet() {
  const [sheets, setSheets] = useState([
    {
      name: 'Sheet1',
      celldata: [
        { r: 0, c: 0, v: { v: 'Товар', m: 'Товар', ct: { fa: 'General', t: 'g' } } },
        { r: 0, c: 1, v: { v: 'Цена', m: 'Цена', ct: { fa: 'General', t: 'g' } } },
        { r: 1, c: 0, v: { v: 'Кофе', m: 'Кофе' } },
        { r: 1, c: 1, v: { v: 250, m: '250', ct: { fa: '#,##0.00', t: 'n' } } },
      ],
      row: 100,
      column: 26,
    },
  ])

  return (
    <div style={{ height: '600px' }}>
      <Workbook
        data={sheets}
        onChange={setSheets}
        showFormulaBar={true}
        showToolbar={true}
        lang="ru"
      />
    </div>
  )
}

ייצוא נתונים ל-Excel עם SheetJS

אנו משתמשים בספריית SheetJS (npm install hyperformula @handsontable/react @fortune-sheet/react xlsx ). פונקציית ייצוא עבור Handsontable:

import * as XLSX from 'xlsx'

function exportToExcel(hot: Handsontable) {
  const data = hot.getData()
  const headers = hot.getColHeader() as string[]
  const ws = XLSX.utils.aoa_to_sheet([headers, ...data])
  ws['!cols'] = headers.map(() => ({ wch: 20 }))
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Данные')
  XLSX.writeFile(wb, `export-${new Date().toISOString().slice(0,10)}.xlsx`)
}

מה כלול ביישום

1. ניתוח דרישות: נוסחאות, סוגי נתונים, מגבלות רישיון (יום אחד).
2. בחירת ספרייה והגדרת עמודות עם אימות (0.5 יום).
3. אינטגרציה של HyperFormula או נוסחאות מובנות (2–3 ימים).
4. ייבוא/ייצוא XLSX דרך SheetJS (יום אחד).
5. פיתוח API לאחסון נתונים. תיעוד והכשרת צוות.

הצוות שלנו מבטיח אינטגרציה חלקה עם תמיכה מלאה, והשלמנו למעלה מ-30 אינטגרציות מוצלחות של גיליונות אלקטרוניים.

מתי לבחור גלילה וירטואלית?

לטבלאות עם 10,000+ שורות, בהחלט השתמש בווירטואליזציה. Handsontable ו-Fortune-Sheet תומכים בזה ישירות מהקופסה, אבל ייתכן שתצטרך להגדיר import { Workbook } from '@fortune-sheet/react' import '@fortune-sheet/react/dist/index.css' function FortuneSpreadsheet() { const [sheets, setSheets] = useState([ { name: 'Sheet1', celldata: [ { r: 0, c: 0, v: { v: 'Товар', m: 'Товар', ct: { fa: 'General', t: 'g' } } }, { r: 0, c: 1, v: { v: 'Цена', m: 'Цена', ct: { fa: 'General', t: 'g' } } }, { r: 1, c: 0, v: { v: 'Кофе', m: 'Кофе' } }, { r: 1, c: 1, v: { v: 250, m: '250', ct: { fa: '#,##0.00', t: 'n' } } }, ], row: 100, column: 26, }, ]) return ( <div style={{ height: '600px' }}> <Workbook data={sheets} onChange={setSheets} showFormulaBar={true} showToolbar={true} lang="ru" /> </div> ) } ו-xlsx. זה מאיץ את העיבוד פי 5–10.

ציר זמן: טבלה בסיסית הניתנת לעריכה ללא נוסחאות אורכת 2–3 ימים. גיליון אלקטרוני מלא עם נוסחאות ו-XLSX אורך 5–7 ימים. הערכת היקף מדויקת היא אישית.

עלות ובחירת פתרון

רישיון מסחרי של Handsontable עולה מ-$149 לחודש—הרבה יותר טוב מהשקעה של 3–6 חודשים ברכיב מותאם אישית עם אותן יכולות. Fortune-Sheet (MIT) אינו דורש דמי רישיון ומתאים לסטארטאפים או לכלים פנימיים עם תקציב מוגבל. שילוב ספרייה מוכנה במקום בנייה מאפס חוסך לפחות $1,500 upfront. עבור פרויקט ארגוני שזקוק לנוסחאות, 10,000+ שורות ותאימות ל-Excel, Handsontable עם HyperFormula מספק תוצאות תוך 5–7 ימים. עבור רישום פשוט הניתן לעריכה, Fortune-Sheet מפחית את התקציב ב-50–70%.

קבל ייעוץ לפרויקט שלך — צור קשר. נעזור לך לבחור את הפתרון האופטימלי ולהשיק אותו בזמן. בקש הדגמה כדי לראות פתרון עובד בפעולה.