Phần bổ trợ tùy chỉnh là công cụ mạnh mẽ để mở rộng chức năng của Excel. Bạn có thể xây dựng các phần bổ trợ của mình để tự động hóa các tác vụ lặp đi lặp lại, tạo các hàm tùy chỉnh hoặc cung cấp cho người dùng các công cụ độc đáo. Trong bài viết này, chúng tôi sẽ xây dựng các phần bổ trợ tùy chỉnh để có chức năng nâng cao.
Hướng dẫn này sẽ hướng dẫn bạn cách xây dựng một bổ trợ Excel tùy chỉnh bằng cách sử dụng khung bổ trợ JavaScript và Office. Bằng cách sử dụng API ExchangeRates chúng tôi sẽ xây dựng một tiện ích bổ sung chuyển đổi tiền tệ.
Bước 1. Thiết lập môi trường phát triển của bạn
Cài đặt và tải xuống các điều kiện tiên quyết:
- Cài đặt Node.js :
- Tải xuống và cài đặt Node.js.
- Cài đặt mã VS :
- Tải xuống và cài đặt Visual Studio Code.
- Cài đặt CLI bổ trợ Office :
- Mở PowerShell hoặc thiết bị đầu cuối và chạy:
npm install -g yo generator-office
- Cài đặt Excel :
- Đảm bảo bạn có Excel 2016 trở lên (khuyên dùng Office 365).
- Chúng tôi đang sử dụng MS Office 365.
Bước 2:Tạo dự án bổ trợ mới
- Mở PowerShell hoặc Dấu nhắc lệnh và Chạy với tư cách quản trị viên .
- Chạy lệnh sau để tạo dự án Phần bổ trợ Office của bạn:
- Lệnh này sẽ nhắc Tiếp tục hoặc Thoát.
- Chọn Tiếp tục để tiếp tục thiết lập dự án Bổ trợ Office của bạn.
- Sử dụng các phím mũi tên để chọn Tiếp tục và nhấn Enter .
- Tiếp theo, nó sẽ đưa ra một loạt câu hỏi về loại phần bổ trợ bạn muốn tạo.
- Chọn loại dự án:
- Chọn Phần bổ trợ ngăn tác vụ (sử dụng các phím mũi tên và nhấn Enter).
- Chọn loại tập lệnh:
- Chọn JavaScript hoặc TypeScript dựa trên sở thích của bạn.
- Bạn muốn đặt tên bổ trợ của mình là gì?
- Nhập tên cho dự án của bạn (ví dụ:CustomAddin).
- Bạn muốn hỗ trợ ứng dụng khách Office nào?
- Chọn Excel .
- Chọn loại dự án:
- Chờ trình tạo hoàn tất. Trình tạo sẽ thiết lập một thư mục dự án với tất cả các tệp cần thiết. Dự án sẽ chứa các tệp sau:
- taskpane.html :Giao diện người dùng của ngăn tác vụ.
- taskpane.js :Chứa mã JavaScript cho ngăn tác vụ của bạn.
- tệp kê khai.xml :Mô tả bổ trợ của bạn cho Office.
Bước 3:Mở dự án trong Visual Studio Code
Sau khi hoàn tất thiết lập, bạn có thể mở thư mục dự án bằng cách sử dụng thiết bị đầu cuối hoặc bạn có thể mở nó trực tiếp bằng mã VS. Trong khi tạo dự án, Yeoman tạo một thư mục trong thư mục hiện tại nơi bạn chạy lệnh yo office. Thư mục sẽ có tên của dự án bổ trợ mà bạn đã chỉ định trước đó (ví dụ:CustomAddin).
Điều hướng đến Thư mục dự án trong Terminal:
- Trong PowerShell hoặc Dấu nhắc lệnh, hãy sử dụng lệnh cd (thay đổi thư mục) để di chuyển vào thư mục dự án.
- Chèn lệnh sau để di chuyển vào thư mục dự án
Mở thư mục trong Visual Studio Code:
- Sau khi vào thư mục dự án, bạn có thể mở nó trong Visual Studio Code trực tiếp từ thiết bị đầu cuối.
- Chạy lệnh sau để mở thư mục trong VS Code:
- Thao tác này sẽ mở toàn bộ dự án trong Visual Studio Code.
Bạn có thể mở thư mục Dự án trực tiếp trong Visual Studio:
- Mở Trình khám phá tệp (Windows) hoặc Finder (Mac) và điều hướng đến thư mục nơi Yeoman đã tạo dự án bổ trợ của bạn.
- Nhấp chuột phải thư mục dự án (ví dụ:CustomAddin)>> chọn Mở bằng mã nếu bạn có Mã Visual Studio đã cài đặt.
- Ngoài ra, bạn có thể mở Visual Studio Code, truy cập File tab>> chọn Mở thư mục và chọn thư mục dự án của bạn.
Bước 3. Tạo công cụ chuyển đổi tiền tệ theo thời gian thực
Sau khi mở dự án trong VS Code, bạn có thể bắt đầu chỉnh sửa và xây dựng phần bổ trợ của mình:
Phần phụ thuộc cài đặt:
Nếu bạn chưa cài đặt các phần phụ thuộc cần thiết (như Office.js), hãy mở một thiết bị đầu cuối trong VS Code và chạy lệnh sau.
Cập nhật taskpane.html và taskpane.js trong Mã VS
Giờ đây, bạn có thể chỉnh sửa các tệp HTML, JavaScript và CSS trong thư mục src/ để xác định chức năng và giao diện của phần bổ trợ.
Hãy sửa đổi taskpane.html để thiết kế giao diện người dùng của phần bổ trợ của bạn và cập nhật taskpane.js để thêm tính tương tác (ví dụ:các hàm tương tác với Excel).
Sửa đổi taskpane.html:
Mở taskpane.html và thay thế nội dung hiện có bằng nội dung sau:
<!DOCTYPE html>
<html>
<head>
<title>Currency Converter</title>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="./taskpane.js"></script>
</head>
<body>
<h2>Currency Converter</h2>
<label for="fromCurrency">From:</label>
<input id="fromCurrency" type="text" placeholder="e.g., USD" />
<br>
<label for="toCurrency">To:</label>
<input id="toCurrency" type="text" placeholder="e.g., EUR" />
<br>
<button id="convertButton">Convert</button>
<p id="status"></p>
</body>
</html>Giải thích:
- Phần:
:Đặt tiêu đề của trang là “Công cụ chuyển đổi tiền tệ”.