Add-in แบบกำหนดเองเป็นเครื่องมือที่มีประสิทธิภาพในการขยายฟังก์ชันการทำงานของ Excel คุณสามารถสร้าง Add-in ของคุณเพื่อทำให้งานที่ซ้ำกันโดยอัตโนมัติ สร้างฟังก์ชันแบบกำหนดเอง หรือมอบเครื่องมือเฉพาะให้กับผู้ใช้ ในบทความนี้ เราจะสร้าง Add-in แบบกำหนดเองสำหรับฟังก์ชันที่ได้รับการปรับปรุง
บทช่วยสอนนี้จะแนะนำคุณตลอดการสร้าง Add-in ของ Excel แบบกำหนดเองโดยใช้ JavaScript และเฟรมเวิร์ก Add-ins ของ Office โดยใช้ ExchangeRates API เราจะสร้างส่วนเสริมตัวแปลงสกุลเงิน
ขั้นตอนที่ 1. ตั้งค่าสภาพแวดล้อมการพัฒนาของคุณ
ติดตั้งและดาวน์โหลดข้อกำหนดเบื้องต้น:
- ติดตั้ง Node.js :
- ดาวน์โหลดและติดตั้ง Node.js
- ติดตั้งโค้ด VS :
- ดาวน์โหลดและติดตั้งโค้ด Visual Studio
- ติดตั้ง Office Add-in CLI :
- เปิด PowerShell หรือเทอร์มินัลแล้วเรียกใช้:
npm install -g yo generator-office
- ติดตั้ง Excel :
- ตรวจสอบให้แน่ใจว่าคุณมี Excel 2016 หรือใหม่กว่า (แนะนำ Office 365)
- เรากำลังใช้ MS Office 365
ขั้นตอนที่ 2:สร้างโปรเจ็กต์ Add-in ใหม่
- เปิด PowerShell หรือ พร้อมรับคำสั่ง และ เรียกใช้ในฐานะผู้ดูแลระบบ .
- เรียกใช้คำสั่งต่อไปนี้เพื่อสร้างโครงการ Office Add-in ของคุณ:
- คำสั่งนี้จะแจ้งให้ดำเนินการต่อหรือออก
- เลือก ดำเนินการต่อ เพื่อดำเนินการตั้งค่าโครงการ Office Add-in ของคุณต่อไป
- ใช้ปุ่มลูกศรเพื่อเลือกดำเนินการต่อ และกด Enter .
- ถัดไป ระบบจะถามคำถามเกี่ยวกับประเภทของ Add-in ที่คุณต้องการสร้าง
- เลือกประเภทโครงการ:
- เลือก ส่วนเสริมของบานหน้าต่างงาน (ใช้ปุ่มลูกศรแล้วกด Enter)
- เลือกประเภทสคริปต์:
- เลือก จาวาสคริปต์ หรือ TypeScript ตามความต้องการของคุณ
- คุณต้องการตั้งชื่อ Add-in ของคุณว่าอะไร
- พิมพ์ชื่อโครงการของคุณ (เช่น CustomAddin)
- คุณต้องการสนับสนุนแอปพลิเคชันไคลเอ็นต์ Office ใด
- เลือก Excel .
- เลือกประเภทโครงการ:
- รอให้ตัวสร้างดำเนินการให้เสร็จสิ้น เครื่องกำเนิดไฟฟ้าจะตั้งค่าโฟลเดอร์โครงการพร้อมไฟล์ที่จำเป็นทั้งหมด โครงการจะประกอบด้วยไฟล์ต่อไปนี้:
- taskpane.html :UI ของบานหน้าต่างงาน
- taskpane.js :มีโค้ด JavaScript สำหรับบานหน้าต่างงานของคุณ
- manifest.xml :อธิบาย Add-in ของคุณใน Office
ขั้นตอนที่ 3:เปิดโครงการใน Visual Studio Code
หลังจากตั้งค่าเสร็จแล้ว คุณสามารถเปิดโฟลเดอร์โปรเจ็กต์ได้โดยใช้เทอร์มินัล หรือคุณสามารถเปิดโดยตรงในโค้ด VS ขณะสร้างโปรเจ็กต์ Yeoman จะสร้างโฟลเดอร์ในไดเร็กทอรีปัจจุบันที่คุณรันคำสั่ง yo office โฟลเดอร์นี้จะมีชื่อของโครงการ Add-in ที่คุณระบุไว้ก่อนหน้านี้ (เช่น CustomAddin)
นำทางไปยังโฟลเดอร์โครงการใน Terminal:
- ใน PowerShell หรือ Command Prompt ของคุณ ให้ใช้คำสั่ง cd (เปลี่ยนไดเรกทอรี) เพื่อย้ายไปยังโฟลเดอร์โครงการ
- แทรกคำสั่งต่อไปนี้เพื่อย้ายไปยังโฟลเดอร์โครงการ
เปิดโฟลเดอร์ในโค้ด Visual Studio:
- เมื่อคุณอยู่ในโฟลเดอร์โปรเจ็กต์แล้ว คุณสามารถเปิดใน Visual Studio Code ได้โดยตรงจากเทอร์มินัล
- เรียกใช้คำสั่งต่อไปนี้เพื่อเปิดโฟลเดอร์ใน VS Code:
- ซึ่งจะเปิดโครงการทั้งหมดใน Visual Studio Code
คุณสามารถเปิดโฟลเดอร์โครงการได้โดยตรงใน Visual Studio:
- เปิด ตัวสำรวจไฟล์ (Windows) หรือ Finder (Mac) แล้วไปที่โฟลเดอร์ที่ Yeoman สร้างโปรเจ็กต์ Add-in ของคุณ
- คลิกขวา โฟลเดอร์โครงการ (เช่น CustomAddin)>> เลือก เปิดด้วยโค้ด หากคุณมี รหัส Visual Studio ติดตั้งแล้ว
- หรืออีกทางหนึ่ง คุณสามารถเปิด Visual Studio Code ได้โดยไปที่ ไฟล์ แท็บ>> เลือก เปิดโฟลเดอร์ และเลือกโฟลเดอร์โครงการของคุณ
ขั้นตอนที่ 3 การสร้างตัวแปลงสกุลเงินแบบเรียลไทม์
เมื่อโปรเจ็กต์เปิดใน VS Code คุณสามารถเริ่มแก้ไขและสร้าง Add-in ของคุณได้:
ติดตั้งการอ้างอิง:
หากคุณยังไม่ได้ติดตั้งการขึ้นต่อกันที่จำเป็น (เช่น Office.js) ให้เปิดเทอร์มินัลใน VS Code แล้วรันคำสั่งต่อไปนี้
อัปเดต Taskpane.html และ Taskpane.js ใน VS Code
ตอนนี้คุณสามารถแก้ไขไฟล์ HTML, JavaScript และ CSS ในโฟลเดอร์ src/ เพื่อกำหนดการทำงานและรูปลักษณ์ของ Add-in ได้
มาแก้ไข Taskpane.html เพื่อออกแบบอินเทอร์เฟซผู้ใช้ของ Add-in ของคุณ และอัปเดต Taskpane.js เพื่อเพิ่มการโต้ตอบ (เช่น ฟังก์ชันที่โต้ตอบกับ Excel)
แก้ไข Taskpane.html:
เปิด Taskpane.html และแทนที่เนื้อหาที่มีอยู่ด้วยเนื้อหาต่อไปนี้:
<!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>คำอธิบาย:
- ส่วน:
</strong> :ตั้งชื่อเพจเป็น “ตัวแปลงสกุลเงิน”</li> <li><strong><script></strong> :<ul> <li>รวม office.js สำหรับการรวม Office Add-in</li> <li>ลิงก์ Taskpane.js สำหรับฟังก์ชันการทำงานของ JavaScript แบบกำหนดเอง</li> </ul> </li> </ul> </li> </ul> <ul> <li><strong><body> ส่วน:</strong> <ul> <li><strong><h2></strong> :แสดงหัวข้อ “ตัวแปลงสกุลเงิน”</li> <li><strong><ฉลาก> และ <input></strong> :ช่องสำหรับการป้อนข้อมูลของผู้ใช้ (fromCurrency และ toCurrency)</li> <li><strong><ปุ่ม></strong> :ทริกเกอร์การแปลงสกุลเงิน</li> <li><strong><p> </strong> :แสดงข้อความสถานะหรือข้อผิดพลาด</li> </ul> </li> </ul> <p> เค้าโครงนี้เป็นอินเทอร์เฟซผู้ใช้สำหรับ Add-in ของ Excel ของคุณ</P> <p> <strong>การเพิ่มลอจิกใน Taskpane.js:</strong> </ป> <p> เปิด Taskpane.js และแทนที่เนื้อหาที่มีอยู่ด้วยโค้ดนี้:</P> <pre>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."; } } </pre> <p> <strong>คำอธิบาย:</strong> </ป> <ul> <li><strong>Office.onReady:</strong> เริ่มต้น Add-in เมื่อสภาพแวดล้อม Office พร้อม</li> <li><strong>ฟังก์ชันแปลงสกุลเงิน:</strong> <ul> <li>อ่านสกุลเงินที่ป้อน (จากสกุลเงินและถึงสกุลเงิน)</li> <li>ตรวจสอบอินพุตและดึงข้อมูลอัตราแลกเปลี่ยนผ่าน API</li> <li>ใช้ Excel.run เพื่อใช้การแปลงกับเซลล์ Excel ที่เลือก</li> <li>แสดงข้อความสำเร็จหรือข้อผิดพลาดในบานหน้าต่างงาน</li> </ul> </li> <li><strong>การจัดการข้อผิดพลาด:</strong> ตรวจจับและบันทึกข้อผิดพลาดรันไทม์ API หรือ Excel โดยให้ข้อเสนอแนะแก่ผู้ใช้</li> </ul> <h2>ขั้นตอนที่ 4. ทดสอบ Add-in ของคุณ</h2> <p> มาทดสอบ Add-in เพื่อดูว่ามันทำงานอย่างไรใน Excel</P> <ul> <li>หากคุณไม่ได้อยู่ในโฟลเดอร์โปรเจ็กต์ ให้นำทางไปยังโฟลเดอร์โปรเจ็กต์ของคุณในเทอร์มินัล:</li> <li>เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัลโค้ด VS</li> </ul> <ul> <li>หากต้องการเริ่มเซิร์ฟเวอร์การพัฒนา ให้รันคำสั่งต่อไปนี้</li> </ul> <ul> <li>มันจะถามคำถาม:<strong>“? อนุญาต localhost loopback สำหรับ Microsoft Edge WebView หรือไม่?”</strong> </li> <li>ประเภท:<strong>ใช่</strong> </li> </ul> <p> <img loading='lazy' alt='สร้างโปรแกรมเสริม Excel อันทรงพลัง:คู่มือ JavaScript ทีละขั้นตอน ' src="/article/uploadfiles/202605/2026050210084881.png" /></P> <p> คำสั่งนี้จะเปิดไฟล์ Excel</P> <ul> <li>Excel จะเปิดขึ้น และ Add-in จะถูกโหลดโดยอัตโนมัติในบานหน้าต่างงาน<ul> <li>เลือกช่วงของเซลล์ที่มีค่าในสกุลเงินต้นทาง</li> <li>เราเลือกเซลล์ A2:A10</li> <li>ในส่วน <strong>จาก</strong> กล่อง:ใส่ <strong>USD</strong> และ <strong>ถึง </strong> กล่อง:ใส่ <strong>EUR</strong> .</li> <li>คลิก <strong>แปลง</strong> .</li> </ul> </li> </ul> <p> <img loading='lazy' alt='สร้างโปรแกรมเสริม Excel อันทรงพลัง:คู่มือ JavaScript ทีละขั้นตอน ' src="/article/uploadfiles/202605/2026050210084933.png" /></P> <h2>ขั้นตอนที่ 5:ปรับใช้ Add-In</h2> <p> คุณสามารถปรับใช้กับ Office 365 หรือแชร์เพื่อใช้ภายในองค์กรของคุณ คุณสามารถทำได้โดยบรรจุ Add-in ลงในแพ็กเกจแล้วอัปโหลดไปยัง Office Store</P> <p> ต่อไปนี้เป็นวิธีจัดแพคเกจ Add-in:</P> <ul> <li>ในเทอร์มินัล ให้รัน:</li> </ul> <ul> <li>สิ่งนี้จะสร้างเวอร์ชันที่ใช้งานจริงของ Add-in ของคุณ ซึ่งคุณสามารถโฮสต์บนเว็บเซิร์ฟเวอร์หรืออัปโหลดไปยังบริการคลาวด์เช่น Azure</li> </ul> <h2>ปัญหาและแนวทางแก้ไขการตั้งค่าสภาพแวดล้อมทั่วไป</h2> <ul> <li><strong>ข้อผิดพลาดนโยบายการดำเนินการสคริปต์ (ไม่สามารถโหลด npm.ps1)</strong> <ul> <li><strong>วิธีแก้ปัญหา:</strong> กำหนดนโยบายการดำเนินการโดยการรัน:</li> </ul> </li> </ul> <pre>Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned </pre> <ul> <li><strong>ไม่รู้จักคำสั่ง yo</strong> <ul> <li><strong>วิธีแก้ปัญหา:</strong> ตรวจสอบให้แน่ใจว่า Yeoman ได้รับการติดตั้งอย่างถูกต้องโดยเรียกใช้:</li> </ul> </li> </ul> <ul> <li><ul> <li>ในการตรวจสอบการติดตั้ง:</li> </ul> </li> </ul> <ul> <li><strong>ปัญหาการอนุญาตเมื่อติดตั้งแพ็คเกจ</strong> <ul> <li><strong>วิธีแก้ปัญหา:</strong> เรียกใช้ PowerShell หรือ Command Prompt ในฐานะผู้ดูแลระบบ หรือใช้ <strong>–force</strong> ตั้งค่าสถานะระหว่างการติดตั้ง</li> </ul> </li> </ul> <h2>บทสรุป</h2> <p> ด้วยการทำตามขั้นตอนข้างต้น คุณสามารถสร้าง Add-in ของตัวแปลงสกุลเงินใน Excel ได้ เราได้กล่าวถึงขั้นตอนโดยละเอียดเกี่ยวกับวิธีตั้งค่าสภาพแวดล้อมการพัฒนา สร้าง Add-in และใช้งานฟังก์ชันการทำงานด้วย JavaScript คุณสามารถขยายฟังก์ชัน Add-in นี้เพิ่มเติมได้โดยการเพิ่มคุณลักษณะขั้นสูงเพิ่มเติม</P> รับแบบฝึกหัด Excel ขั้นสูงพร้อมโซลูชันฟรี! <br> </article> <div class="ad ad5"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4480737146802772" crossorigin="anonymous"></script><!-- computer.wsxdn --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4480737146802772" data-ad-slot="4467655591" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <section id="turn-page" class="t-over"> <div class="f-start f-align"> <i><img loading='lazy' src="https://th.wsxdn.com/css/img/sanjiao.svg" alt=""></i> <a class='LinkPrevArticle' href='https://th.wsxdn.com/tr042l/ec415w/1004160626.html' >สร้างแดชบอร์ด Excel แบบโต้ตอบโดยใช้การควบคุมแบบฟอร์ม (ไม่จำเป็นต้องใช้ VBA) </a> </div> <div class="f-start f-align"> <i><img loading='lazy' src="https://th.wsxdn.com/css/img/sanjiao.svg" alt=""></i> <a class='LinkNextArticle' href='https://th.wsxdn.com/tr042l/ec415w/1004160628.html' >เพิ่มประสิทธิภาพ Excel:กลยุทธ์ที่ได้รับการพิสูจน์แล้วเพื่อเพิ่มประสิทธิภาพสมุดงานขนาดใหญ่ </a> </div> </section> <section class="box1-3"> <ol class="f-between"> <li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/tr042l/ec415w/1004099709.html" class="title"> <p class="r-over r-over-2" title="วิธีปิดการแสดงตัวอย่างข้อความใน Outlook">วิธีปิดการแสดงตัวอย่างข้อความใน Outlook</p> </a> </div> </li> <li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/tr042l/ec415w/1004141487.html" class="title"> <p class="r-over r-over-2" title="วิธีการแปลง PDF เป็น Excel โดยไม่สูญเสียการจัดรูปแบบ (2 วิธีง่ายๆ)">วิธีการแปลง PDF เป็น Excel โดยไม่สูญเสียการจัดรูปแบบ (2 วิธีง่ายๆ)</p> </a> </div> </li> <li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/tr042l/ec415w/1004141463.html" class="title"> <p class="r-over r-over-2" title="สร้างตัวกรอง Excel โดยใช้รายการแบบเลื่อนลงตามค่าของเซลล์">สร้างตัวกรอง Excel โดยใช้รายการแบบเลื่อนลงตามค่าของเซลล์</p> </a> </div> </li> <li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/tr042l/ec415w/1004101148.html" class="title"> <p class="r-over r-over-2" title="วิธีสร้างสมุดบันทึกใหม่และเพิ่มหน้าใน OneNote ">วิธีสร้างสมุดบันทึกใหม่และเพิ่มหน้าใน OneNote </p> </a> </div> </li> </ol> </section> </section> <aside class="box-r"> <section class="box4-1"> <strong>Office</strong> <ol> <li class="f-start"> <i><img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""></i> <a href="https://th.wsxdn.com/db044w/db453v/1004068984.html" title="ตรวจสอบว่าชุดที่ให้มาสองชุดไม่ปะติดปะต่อกันหรือไม่? "> <p class="r-over r-over-2">ตรวจสอบว่าชุดที่ให้มาสองชุดไม่ปะติดปะต่อกันหรือไม่? </p> </a> </li> <li class="f-start"> <i><img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""></i> <a href="https://th.wsxdn.com/db044w/bz445u/1004082932.html" title="โปรแกรม C++ เพื่อค้นหาองค์ประกอบที่ใหญ่ที่สุดลำดับที่ k "> <p class="r-over r-over-2">โปรแกรม C++ เพื่อค้นหาองค์ประกอบที่ใหญ่ที่สุดลำดับที่ k </p> </a> </li> <li class="f-start"> <i><img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""></i> <a href="https://th.wsxdn.com/tr042l/vt418n/1004000794.html" title="วิธียกเลิกการเสนอราคาบนอีเบย์"> <p class="r-over r-over-2">วิธียกเลิกการเสนอราคาบนอีเบย์</p> </a> </li> <li class="f-start"> <i><img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""></i> <a href="https://th.wsxdn.com/bz047t/da411v/1004147759.html" title="ขั้นตอนในการตั้งค่าแอปเริ่มต้นบน Android"> <p class="r-over r-over-2">ขั้นตอนในการตั้งค่าแอปเริ่มต้นบน Android</p> </a> </li> <li class="f-start"> <i><img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""></i> <a href="https://th.wsxdn.com/db044w/ec452w/1004056219.html" title="Microsoft เทียบเท่ากับเหตุการณ์ที่เซิร์ฟเวอร์ส่ง HTML5 หรือไม่ "> <p class="r-over r-over-2">Microsoft เทียบเท่ากับเหตุการณ์ที่เซิร์ฟเวอร์ส่ง HTML5 หรือไม่ </p> </a> </li> </ol> </section> <ul> <li class="f-start f-align"> <a href="https://th.wsxdn.com/tr042l/vt418n/1004019704.html" class="i-text"><p class="r-over r-over-3">วิธีบล็อกเว็บไซต์บน Google Chrome</p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/tr042l/ec415w/1004100809.html" class="i-text"><p class="r-over r-over-3">วิธีพิมพ์รูปภาพพื้นหลังใน Excel</p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/tr042l/bz428t/1004097323.html" class="i-text"><p class="r-over r-over-3">10 สุดยอดแอพ Chrome เพื่อการศึกษาสำหรับนักเรียน </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/tr042l/bz428t/1004097256.html" class="i-text"><p class="r-over r-over-3">วิธีปรับการแจ้งเตือน Google ปฏิทินของคุณบนอุปกรณ์ใด ๆ </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/tr042l/ec415w/1004100332.html" class="i-text"><p class="r-over r-over-3">ตัวแก้ไขปัญหาการเปิดใช้งาน Microsoft Office สำหรับ Office 2021 และ Office 365 </p></a> </li> </ul> <ul class="types f-between"> <li><a class='childclass' href='https://th.wsxdn.com/tr042l/ec415w/' target="_self">Office</a></li> <li><a class='childclass' href='https://th.wsxdn.com/tr042l/jh416b/' target="_self">ประเภทไฟล์</a></li> <li><a class='childclass' href='https://th.wsxdn.com/tr042l/ay417s/' target="_self">Google Apps</a></li> <li><a class='childclass' href='https://th.wsxdn.com/tr042l/vt418n/' target="_self">ซอฟต์แวร์</a></li> <li><a class='childclass' href='https://th.wsxdn.com/tr042l/bz428t/' target="_self">เบราว์เซอร์</a></li> <li><a class='childclass' href='https://th.wsxdn.com/tr042l/ig429a/' target="_self">สื่อสังคม</a></li> <li><a class='childclass' href='https://th.wsxdn.com/tr042l/vt437n/' target="_self">อีเมล</a></li> <li><a class='childclass' href='https://th.wsxdn.com/tr042l/jh438b/' target="_self">เครื่องเสมือน</a></li> <li><a class='childclass' href='https://th.wsxdn.com/tr042l/rp464j/' target="_self">Mac</a></li> </ul> </aside> </section> <footer> <section class="msg f-center container"> <span class="f-start"> ลิขสิทธิ์ © <a href="https://th.wsxdn.com">https://th.wsxdn.com</a> สงวนลิขสิทธิ์ </span> </section> </footer> </body> </html>