JavaScript API เพื่อจัดการเอกสาร Word ด้วย React

ไลบรารี JavaScript แบบโอเพนซอร์สเพื่อสร้าง แก้ไข และแปลงไฟล์ Word เพิ่มย่อหน้าและรายการจุดในเอกสารที่มีอยู่ และอื่นๆ

redocx เป็นไลบรารีโอเพ่นซอร์สที่มีประโยชน์มาก ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์สามารถสร้างและจัดการเอกสารคำด้วยการโต้ตอบโดยใช้คำสั่ง JavaScript ไลบรารีมีชุดส่วนประกอบที่มีประสิทธิภาพมากซึ่งสามารถใช้เพื่อแสดงองค์ประกอบ React ไปยังวัตถุเอกสาร Word ได้อย่างง่ายดาย คุณต้องระบุชื่อไฟล์และเส้นทางสำหรับเอกสาร นักพัฒนายังสามารถแสดงเอกสารไปยังสตรีมที่แมปหน่วยความจำได้โดยตรง

ไลบรารี redocx นั้นจัดการได้ง่ายมากและมีฟีเจอร์ที่ทรงพลังมากที่เกี่ยวข้องกับการสร้างและการแสดงผลเอกสาร Word เช่น การสร้างเอกสารใหม่ตั้งแต่ต้น การเพิ่มย่อหน้าลงในเอกสารที่มีอยู่ เพิ่มรายการจุด เพิ่มรายการตัวเลขลงใน เอกสารคำ, แทรกส่วนหัว/ส่วนท้ายลงในไฟล์คำ, วาดเส้นแนวนอนหรือแนวตั้ง, แทรกตาราง, เพิ่มรูปภาพไปยังตำแหน่งที่คุณเลือกและอีกมากมาย

Previous Next

เริ่มต้นใช้งาน redocx

วิธีที่แนะนำในการติดตั้งไลบรารี redocx คือผ่าน npm โปรดใช้คำสั่งต่อไปนี้เพื่อการติดตั้งที่ราบรื่น

ติดตั้ง redocx ผ่าน npm

 npm install --save react redocx 

การสร้างเอกสาร Word ผ่าน JavaScript API

Microsoft word เป็นโปรแกรมประมวลผลคำชั้นนำที่ใช้ในการสร้างเอกสารที่ใช้กันทั่วโลกเป็นหลัก เช่น จดหมาย โบรชัวร์ แบบทดสอบ หรือแบบทดสอบ เป็นต้น ไลบรารี redocx ช่วยให้นักพัฒนาซอฟต์แวร์สามารถสร้างเอกสาร Word ใหม่โดยใช้ Java นอกจากนี้ยังง่ายต่อการแก้ไขเอกสารที่มีอยู่โดยใช้คำสั่งง่ายๆ คุณสามารถเพิ่มย่อหน้า รูปภาพ ตาราง รายการ และอื่นๆ ได้อย่างง่ายดาย

เพศ ข้อความ ไปยัง Word เอกสาร ผ่านทาง JavaScript API

import React from 'react'
import { render, Document, Text } from 'redocx'
class App extends React.Component {
  render() {
    return (
      
        Hello World
      
    )
  }
}
render(, `${__dirname}/example.docx`)

การจัดการตารางในเอกสาร Word

ตารางเป็นองค์ประกอบการจัดรูปแบบที่สำคัญที่สุดที่ช่วยให้ผู้ใช้ประมวลผล Word สามารถจัดระเบียบเนื้อหาของตนได้ดีขึ้นภายในเอกสารคำของพวกเขา ไลบรารี redocx แบบโอเพ่นซอร์สได้รวมการสนับสนุนอย่างสมบูรณ์สำหรับการแทรกและการจัดการตารางโดยใช้คำสั่ง JavaScript มีฟังก์ชันสำคัญหลายอย่างสำหรับการจัดการตาราง เช่น การตั้งค่าความกว้างของแต่ละคอลัมน์ ขนาดตาราง การจัดแนวเนื้อหา การตั้งค่าขนาดเส้นขอบ การแทรกแถวและคอลัมน์ การใช้ส่วนหัวของตาราง และอื่นๆ อีกมากมาย

วิธีการจัดการตารางภายใน JavaScript ปพลิเคชัน

import React, { Component } from 'react';
import { Table, Document } from '../src/';
const tableStyle = {
	tableColWidth: 4261, // Width of each column
	tableSize: 24, // Table size
	tableColor: 'red', // Content color
	tableAlign: 'center', // Align content
	borders: true, // Borders
};
const HEADERS = [
  {
    value: 'Phone',
    styles: {
      color: 'red',
      bold: true,
      size: 10
    }
  },
  {
    value: 'Capacity',
    styles: {
      color: 'blue',
      bold: true,
      size: 10
    }
  }
]
const DATA = [
  ['iPhone 7', '128GB'],
  ['iPhone 5SE', '64GB']
]
export default TableComponent;

แทรกส่วนหัวและส่วนท้ายในไฟล์ MS Word

หัวกระดาษและท้ายกระดาษเป็นส่วนที่มีประโยชน์มากของเอกสารคำที่สามารถใช้เพื่อจัดระเบียบเอกสารที่ยาวขึ้นโดยเก็บข้อมูลที่ผู้ใช้ต้องการให้ปรากฏบนทุกหน้าของเอกสาร Word เช่น ชื่อผู้แต่ง ชื่อเอกสาร หรือหมายเลขหน้า เป็นต้น ไลบรารี redocx แบบโอเพ่นซอร์สมีฟังก์ชันการทำงานที่สมบูรณ์สำหรับการแทรก ตลอดจนการจัดการส่วนหัวและส่วนท้ายแบบกำหนดเองภายในเอกสาร Word ได้อย่างง่ายดาย นอกจากนี้ยังสามารถตั้งค่าส่วนหัวและส่วนท้ายหลายส่วนสำหรับส่วนต่างๆ ของเอกสารคำได้

จัดการส่วนหัวในเอกสาร Word ผ่าน JavaScript API

import React, { Component } from 'react';
import { Header, Document } from '../src/';
class HeaderComponent extends Component {
  render () {
    return (
      
        
Heading
); } } export default HeaderComponent

การจัดการรูปภาพภายในไฟล์ Word

นักพัฒนาซอฟต์แวร์และโปรแกรมเมอร์สามารถแทรกและแก้ไขภาพไปยังตำแหน่งที่ต้องการได้อย่างง่ายดายในเอกสาร MS Word โดยใช้ไลบรารี redocx โอเพ่นซอร์ส คุณต้องระบุชื่อรูปภาพและที่อยู่ที่สมบูรณ์ ไลบรารีได้รวมฟังก์ชันการทำงานที่สำคัญสำหรับการจัดแนวรูปภาพของคุณ การตั้งค่าความกว้างและความสูงของรูปภาพ การนำสไตล์ไปใช้กับรูปภาพ และอื่นๆ

วิธีจัดการรูปภาพในไฟล์ Word ผ่าน JavaScript API

import React, { Component } from 'react';
import { Image, Document } from '../src/';
class ImageComponent extends Component {
  render () {
    return (
      // image file path will be provided here 
      
  }
}
 ไทย