Computer >> Hướng Dẫn Máy Tính >  >> Phần Mềm >> Office

Tạo Tiện ích Bổ sung Excel Mạnh mẽ: Hướng dẫn JavaScript Bước theo Bước

Tạo Tiện ích Bổ sung Excel Mạnh mẽ: Hướng dẫn JavaScript Bước theo Bước

Tiện ích bổ sung 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 tiện ích bổ sung của riêng mình để tự động hóa các tác vụ lặp lại, tạo 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 ta sẽ xây dựng tiện ích bổ sung tùy chỉnh để tăng cường chức năng.

Hướng dẫn này sẽ dẫn dắt bạn qua việc xây dựng một tiện ích bổ sung Excel tùy chỉnh sử dụng JavaScript và khung Office Add-ins. Bằng cách sử dụng API ExchangeRates, chúng ta sẽ xây dựng một tiện ích chuyển đổi tiền tệ.

Bước 1. Thiết lập Môi trường Phát triể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 VS Code:
    • Tải xuống và cài đặt Visual Studio Code.
  • Cài đặt Office Add-in CLI:
    • Mở PowerShell hoặc terminal và chạy:
npm install -g yo generator-office

Tạo Tiện ích Bổ sung Excel Mạnh mẽ: Hướng dẫn JavaScript Bước theo Bước

  • Cài đặt Excel:
    • Đảm bảo bạn có Excel 2016 hoặc mới hơn (Office 365 khuyến nghị).
    • Chúng tôi đang sử dụng MS Office 365.

Bước 2: Tạo Dự án Tiện ích Bổ sung Mới

  • Mở PowerShell hoặc Command Prompt và Chạy với quyền Quản trị viên.
  • Chạy lệnh sau để tạo dự án Office Add-in 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ến hành thiết lập dự án Office Add-in của bạn.
    • Sử dụng phím mũi tên để chọn Tiếp tục và nhấn Enter.
  • Tiếp theo, nó sẽ nhắc một loạt câu hỏi về loại tiện ích bổ sung bạn muốn tạo.
    • Chọn loại dự án:
      • Chọn Task pane add-in (sử dụng phím mũi tên và nhấn Enter).
    • Chọn loại kịch bản:
      • Chọn JavaScript hoặc TypeScript dựa trên sở thích của bạn.
    • Bạn muốn đặt tên tiện ích bổ sung là gì?
      • Gõ tên cho dự án của bạn (ví dụ: CustomAddin).
    • Ứng dụng khách Office nào bạn muốn hỗ trợ?
      • Chọn Excel.

Tạo Tiện ích Bổ sung Excel Mạnh mẽ: Hướng dẫn JavaScript Bước theo Bước

  • Đợi trình tạo hoàn tất. Trình tạo sẽ thiết lập 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 bảng tác vụ.
    • taskpane.js: Chứa mã JavaScript cho bảng tác vụ của bạn.
    • manifest.xml: Mô tả tiện ích bổ sung 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 terminal hoặc bạn có thể mở trực tiếp trong VS code. 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 tiện ích bổ sung 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 Command Prompt của bạn, 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:

  • Một khi bạn đã ở trong thư mục dự án, bạn có thể mở nó trong Visual Studio Code trực tiếp từ terminal.
  • Chạy lệnh sau để mở thư mục trong VS Code:

Tạo Tiện ích Bổ sung Excel Mạnh mẽ: Hướng dẫn JavaScript Bước theo Bước

  • Điều này sẽ mở toàn bộ dự án trong Visual Studio Code.

Tạo Tiện ích Bổ sung Excel Mạnh mẽ: Hướng dẫn JavaScript Bước theo Bước

Bạn có thể mở thư mục Dự án trực tiếp trong Visual Studio:

  • Mở File Explorer (Windows) hoặc Finder (Mac) và điều hướng đến thư mục nơi Yeoman tạo dự án tiện ích bổ sung của bạn.
  • Nhấp chuột phải thư mục dự án (ví dụ: CustomAddin) >> chọn Mở với Code nếu bạn đã cài đặt Visual Studio Code.
  • Thay vào đó, bạn có thể mở Visual Studio Code, vào tab Tệp >> chọn Mở Thư mục, và chọn thư mục dự án của bạn.

Bước 3. Tạo Chuyển đổi Tiền tệ Thời gian Thực

Khi dự án được mở trong VS Code, bạn có thể bắt đầu chỉnh sửa và xây dựng tiện ích bổ sung của mình:

Cài đặt Phụ thuộc:

Nếu bạn chưa cài đặt các phụ thuộc cần thiết (như Office.js), mở một terminal trong VS Code và chạy lệnh sau.

Cập nhật taskpane.html và taskpane.js trong VS Code

Bây giờ, 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 tiện ích bổ sung.

Hãy sửa đổi taskpane.html để thiết kế giao diện người dùng của tiện ích bổ sung, 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 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:

  • <head> Phần:
    • <title>: Đặt tiêu đề trang là "Currency Converter."
    • <script>:
      • Bao gồm office.js cho tích hợp Office Add-in.
      • Liên kết taskpane.js cho chức năng JavaScript tùy chỉnh.
  • <body> Phần:
    • <h2>: Hiển thị tiêu đề "Currency Converter."
    • <label> và <input>: Trường nhập liệu người dùng (fromCurrency và toCurrency).
    • <button>: Kích hoạt chuyển đổi tiền tệ.
    • <p>: Hiển thị thông báo trạng thái hoặc lỗi.

Bố cục này tạo giao diện người dùng cho tiện ích bổ sung Excel của bạn.

Thêm Logic trong taskpane.js:

Mở taskpane.js và thay thế nội dung hiện có bằng mã này:

Office.onReady(() => { document.getElementById('convertButton').addEventListener('click', convertCurrency); }); async function convertCurrency() { const fromCurrency = document.getElementById('fromCurrency').value.toUpperCase(); const toCurrency = document.getElementById('toCurrency').value.toUpperCase(); if (!fromCurrency || !toCurrency) { document.getElementById('status').innerText = "Please enter valid currencies."; return; } try { const apiKey = "Your_Api_Key"; // Replace with your ExchangeRates API key const url = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`; const response = await fetch(url); const data = await response.json(); const rate = data.rates[toCurrency]; if (!rate) { document.getElementById('status').innerText = `Invalid conversion rate for ${toCurrency}.`; return; } await Excel.run(async (context) => { const range = context.workbook.getSelectedRange(); range.load("values"); await context.sync(); const convertedValues = range.values.map(row => row.map(cell => cell * rate) ); range.values = convertedValues; document.getElementById('status').innerText = `Converted to ${toCurrency} successfully.`; await context.sync(); }); } catch (error) { console.error(error); document.getElementById('status').innerText = "Error fetching conversion rate."; } }

Giải thích:

  • Office.onReady: Khởi tạo tiện ích bổ sung khi môi trường Office sẵn sàng.
  • Hàm convertCurrency:
    • Đọc tiền tệ đầu vào (fromCurrency và toCurrency).
    • Xác thực đầu vào và tải tỷ giá qua API.
    • Sử dụng Excel.run để áp dụng chuyển đổi cho các ô Excel được chọn.
    • Hiển thị thông báo thành công hoặc lỗi trong bảng tác vụ.
  • Xử lý Lỗi: Bắt và ghi nhật ký lỗi API hoặc runtime Excel, cung cấp phản hồi cho người dùng.

Bước 4. Kiểm tra Tiện ích Bổ sung của Bạn

Hãy kiểm tra tiện ích bổ sung để xem nó hoạt động như thế nào trong Excel.

  • Nếu bạn không ở trong thư mục dự án, điều hướng đến thư mục dự án của bạn trong terminal:
  • Chạy lệnh sau trong terminal VS code.
  • Để khởi động máy chủ phát triển, chạy lệnh sau.
  • Nó sẽ nhắc một câu hỏi: “? Allow localhost loopback for Microsoft Edge WebView?”
  • Gõ: Yes

Tạo Tiện ích Bổ sung Excel Mạnh mẽ: Hướng dẫn JavaScript Bước theo Bước

Lệnh này sẽ khởi chạy tệp Excel.

  • Excel sẽ mở, và tiện ích bổ sung sẽ được tải tự động trong bảng tác vụ.
    • Chọn một phạm vi ô chứa giá trị trong tiền tệ nguồn.
    • Chúng tôi đã chọn ô A2:A10.
    • Trong hộp From: chèn USD và hộp To: chèn EUR.
    • Nhấp Convert.

Tạo Tiện ích Bổ sung Excel Mạnh mẽ: Hướng dẫn JavaScript Bước theo Bước

Bước 5: Triển khai Tiện ích Bổ sung

Bạn có thể triển khai nó cho Office 365 hoặc chia sẻ để sử dụng trong tổ chức của bạn. Bạn có thể làm điều này bằng cách đóng gói tiện ích bổ sung và tải nó lên Cửa hàng Office.

Cách đóng gói tiện ích bổ sung:

  • Trong terminal, chạy:
  • Điều này sẽ tạo bản dựng production của tiện ích bổ sung của bạn, mà bạn có thể lưu trữ trên máy chủ web hoặc tải lên dịch vụ đám mây như Azure.

Vấn đề Thường Gặp Khi Thiết lập Môi trường và Giải pháp

  • Lỗi Chính sách Thực thi Script (npm.ps1 không thể tải)
    • Giải pháp: Đặt chính sách thực thi bằng cách chạy:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
  • Lệnh yo Không Được Nhận Diện
    • Giải pháp: Đảm bảo Yeoman được cài đặt đúng cách bằng cách chạy:
    • Để xác minh cài đặt, chạy:
  • Vấn đề Quyền Khi Cài đặt Gói
    • Giải pháp: Chạy PowerShell hoặc Command Prompt với quyền Quản trị viên, hoặc sử dụng cờ –force trong quá trình cài đặt.

Kết luận

Bằng cách làm theo các bước trên, bạn có thể tạo tiện ích chuyển đổi tiền tệ trong Excel. Chúng tôi đã bao gồm các bước chi tiết về cách thiết lập môi trường phát triển, xây dựng tiện ích bổ sung và triển khai chức năng với JavaScript. Bạn có thể mở rộng chức năng tiện ích bổ sung này thêm bằng cách thêm các tính năng nâng cao hơn.

Nhận bài tập Excel nâng cao miễn phí kèm lời giải!