JavaScript API برای مدیریت اسناد Word با React
کتابخانه جاوا اسکریپت منبع باز برای ایجاد، تغییر و تبدیل فایل های Word، افزودن پاراگراف ها و فهرستی از نقاط به اسناد موجود و غیره.
Redocx یک کتابخانه منبع باز بسیار مفید است که توسعه دهندگان نرم افزار را قادر می سازد اسناد word را با react با استفاده از دستورات جاوا اسکریپت ایجاد و مدیریت کنند. این کتابخانه مجموعه بسیار قدرتمندی از مؤلفهها را ارائه میکند که میتوان از آنها برای رندر کردن یک عنصر React به یک شی سند Word به راحتی استفاده کرد. شما باید نام فایل و مسیر سند را وارد کنید. توسعه دهندگان همچنین می توانند اسناد را مستقیماً به یک جریان نقشه برداری حافظه ارائه دهند.
کار با کتابخانه redocx بسیار آسان است و دارای ویژگی های بسیار قدرتمندی در زمینه ایجاد و رندر اسناد Word است، مانند تولید اسناد جدید از ابتدا، اضافه کردن یک پاراگراف به اسناد موجود، افزودن لیست نقاط، افزودن لیست اعداد به سند word، درج سرصفحه/ پاورقی در فایل word، رسم یک خط افقی یا عمودی، درج جدول، اضافه کردن یک تصویر به مکان مورد نظر و موارد دیگر.
شروع کار با redocx
روش توصیه شده برای نصب کتابخانه redocx از طریق npm است. لطفا از دستور زیر برای نصب راحت استفاده کنید
redocx را از طریق npm نصب کنید
npm install --save react redocx
تولید اسناد Word از طریق JavaScript API
Microsoft word یک برنامه پردازش کلمه پیشرو است که عمدتاً برای ایجاد اسنادی استفاده می شود که در سراسر جهان مانند نامه ها، بروشورها، آزمون ها یا آزمون ها و غیره استفاده می شود. کتابخانه redocx به توسعه دهندگان نرم افزار امکان می دهد اسناد Word جدید را با استفاده از جاوا تولید کنند. همچنین تغییر سند موجود با استفاده از برخی دستورات ساده بسیار آسان است. شما به راحتی می توانید پاراگراف ها، تصاویر، جداول، لیست ها و موارد دیگر را اضافه کنید.
رندر متن به سند 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 Docs
جداول مهمترین عنصر قالببندی هستند که به کاربران پردازش ورد کمک میکنند تا محتوای خود را به روشی بهتر در اسناد ورد خود سازماندهی کنند. کتابخانه منبع باز redocx شامل پشتیبانی کامل برای درج و همچنین مدیریت جداول با استفاده از دستورات جاوا اسکریپت است. این شامل چندین عملکرد مهم برای مدیریت جداول است، مانند تنظیم عرض هر ستون، اندازه جدول، تراز کردن محتوا، تنظیم اندازه مرزها، درج سطرها و ستون ها، استفاده از عنوان جدول و موارد دیگر.
نحوه مدیریت جداول در برنامه های جاوا اسکریپت
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 هستند که می توانند برای سازماندهی اسناد طولانی تر با نگه داشتن اطلاعاتی که کاربران می خواهند در هر صفحه یک سند Word ظاهر شوند مانند نام نویسنده، عنوان سند، یا شماره صفحه و غیره استفاده شوند. کتابخانه منبع باز redocx عملکرد کاملی را برای درج و همچنین مدیریت سرصفحه ها و پاورقی های سفارشی در داخل یک سند Word به راحتی فراهم کرده است. همچنین امکان تنظیم چندین سرصفحه و پاورقی برای بخش های مختلف اسناد 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
توسعه دهندگان نرم افزار و برنامه نویسان می توانند به راحتی تصاویر را با استفاده از کتابخانه redocx منبع باز در مکان های مورد نظر خود در اسناد MS Word قرار داده و تغییر دهند. شما باید نام تصویر و آدرس کامل را وارد کنید. این کتابخانه دارای عملکردهای مهمی برای تراز کردن تصاویر شما، تنظیم عرض و ارتفاع تصویر، اعمال سبک ها بر روی یک تصویر و غیره است.
نحوه مدیریت تصاویر در فایل های 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
}
}