Hướng dẫn react excel add in - phản ứng excel thêm vào

Bỏ qua nội dung chính

Trình duyệt này không còn được hỗ trợ.

Nâng cấp lên Microsoft Edge để tận dụng các tính năng mới nhất, cập nhật bảo mật và hỗ trợ kỹ thuật.

Sử dụng React để xây dựng một khung bổ trợ tác vụ Excel

• Bài báo
• 14/06/2022
• 3 phút để đọc

Trong bài viết này

Trong bài viết này, bạn sẽ đi qua quá trình xây dựng một bổ trợ khung nhiệm vụ Excel bằng React và API JavaScript Excel.

Điều kiện tiên quyết

• Node.js (phiên bản LTS mới nhất).

• Phiên bản mới nhất của yeoman và máy phát điện yeoman cho các tiện ích bổ sung văn phòng. Để cài đặt các công cụ này trên toàn cầu, hãy chạy lệnh sau thông qua dấu nhắc lệnh.

  npm install -g yo generator-office
  

  Ghi chú

  Ngay cả khi trước đây bạn đã cài đặt trình tạo yeoman, chúng tôi khuyên bạn nên cập nhật gói của mình lên phiên bản mới nhất từ ​​NPM.

Tạo dự án bổ trợ

Chạy lệnh sau để tạo một dự án bổ trợ bằng trình tạo yeoman.

yo office

Ghi chú

Ngay cả khi trước đây bạn đã cài đặt trình tạo yeoman, chúng tôi khuyên bạn nên cập nhật gói của mình lên phiên bản mới nhất từ ​​NPM.

Tạo dự án bổ trợ

• Chạy lệnh sau để tạo một dự án bổ trợ bằng trình tạo yeoman. Office Add-in Task Pane project using React framework
• Khi bạn chạy lệnh yo office, bạn có thể nhận được lời nhắc về các chính sách thu thập dữ liệu của Yeoman và các công cụ bổ trợ của Office. Sử dụng thông tin được cung cấp để trả lời lời nhắc khi bạn thấy phù hợp. TypeScript
• Khi được nhắc, cung cấp thông tin sau để tạo dự án bổ trợ của bạn. My Office Add-in
• Chọn loại dự án: Office Add-in Task Pane project using React framework

  yo office
  

  0

Chọn loại tập lệnh: TypeScript

Bạn muốn đặt tên cho bổ trợ của mình là gì? My Office Add-in

Bạn muốn hỗ trợ ứng dụng khách hàng văn phòng nào?

yo office

Sau khi bạn hoàn thành trình hướng dẫn, trình tạo tạo dự án và cài đặt các thành phần nút hỗ trợ.

Mẹo

• Bạn có thể bỏ qua các bước tiếp theo hướng dẫn mà trình tạo yeoman cung cấp sau khi dự án bổ trợ được tạo. Các hướng dẫn từng bước trong bài viết này cung cấp tất cả các hướng dẫn mà bạn sẽ cần để hoàn thành hướng dẫn này.manifest.xml file in the root directory of the project defines the settings and capabilities of the add-in. To learn more about the manifest.xml file, see Office Add-ins XML manifest.
• Khám phá dự án./src/taskpane/taskpane.html file defines the HTML framework of the task pane, and the files within the ./src/taskpane/components folder define the various parts of the task pane UI.
• Dự án bổ trợ mà bạn đã tạo với trình tạo yeoman chứa mã mẫu cho một khung bổ trợ cơ bản. Nếu bạn muốn khám phá các thành phần chính của dự án bổ trợ của mình, hãy mở dự án trong trình chỉnh sửa mã của bạn và xem lại các tệp được liệt kê dưới đây. Khi bạn đã sẵn sàng để thử bổ trợ của mình, hãy tiến hành phần tiếp theo../src/taskpane/taskpane.css file contains the CSS that's applied to content in the task pane.
• Tệp kê khai.xml trong thư mục gốc của dự án xác định các cài đặt và khả năng của bổ trợ. Để tìm hiểu thêm về tệp kê khai.xml, hãy xem BÀI TẬP BÀI TẬP XML Bổ trợ Office../src/taskpane/components/App.tsx file contains the Office JavaScript API code that facilitates interaction between the task pane and Excel.

Tệp ./src/taskpane/taskpane.html xác định khung HTML của ngăn tác vụ và các tệp trong thư mục.

1. Tệp.

   cd "My Office Add-in"
   

2. Tệp.

   Ghi chú

   Ngay cả khi trước đây bạn đã cài đặt trình tạo yeoman, chúng tôi khuyên bạn nên cập nhật gói của mình lên phiên bản mới nhất từ ​​NPM.

   Bạn muốn đặt tên cho bổ trợ của mình là gì? My Office Add-in

   Bạn muốn hỗ trợ ứng dụng khách hàng văn phòng nào?

   yo office
   

   0

   npm run dev-server
   

   • Sau khi bạn hoàn thành trình hướng dẫn, trình tạo tạo dự án và cài đặt các thành phần nút hỗ trợ.

     npm start
     

   • Mẹo

     npm run start:web -- --document {url}
     

     Bạn có thể bỏ qua các bước tiếp theo hướng dẫn mà trình tạo yeoman cung cấp sau khi dự án bổ trợ được tạo. Các hướng dẫn từng bước trong bài viết này cung cấp tất cả các hướng dẫn mà bạn sẽ cần để hoàn thành hướng dẫn này.

     • yo office
       

       1

     • yo office
       

       2

     • yo office
       

       3

     Ghi chú

     Ngay cả khi trước đây bạn đã cài đặt trình tạo yeoman, chúng tôi khuyên bạn nên cập nhật gói của mình lên phiên bản mới nhất từ ​​NPM.

     Tạo dự án bổ trợ

3. Chạy lệnh sau để tạo một dự án bổ trợ bằng trình tạo yeoman.Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane.

4. Khi bạn chạy lệnh yo office, bạn có thể nhận được lời nhắc về các chính sách thu thập dữ liệu của Yeoman và các công cụ bổ trợ của Office. Sử dụng thông tin được cung cấp để trả lời lời nhắc khi bạn thấy phù hợp.

5. Khi được nhắc, cung cấp thông tin sau để tạo dự án bổ trợ của bạn.Run link to set the color of the selected range to yellow.

   

Chọn loại dự án: Office Add-in Task Pane project using React framework

Chọn loại tập lệnh: TypeScript

Xem thêm

• Hướng dẫn bổ sung Excel
• Mô hình đối tượng JavaScript Excel trong các tiện ích bổ sung văn phòng
• Các mẫu mã bổ trợ Excel
• Tham chiếu API JavaScript Excel
• Sử dụng mã Visual Studio để xuất bản