CAD處理控件Aspose.CAD教程：使用 Javascript 將 DWF 轉換為 PNG

翻譯|使用教程|編輯：吉煒煒|2025-02-27 17:06:52.120|閱讀 113 次

概述：對于使用 CAD 圖紙的開發人員來說，將DWF文件轉換為PNG格式的能力至關重要。通過.NET 使用 Aspose.CAD for JavaScript，開發人員可以輕松地在 JavaScript 中將 DWF 轉換為 PNG，確保高質量輸出并無縫集成到現有工作流程中。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

概述

對于使用 CAD 圖紙的開發人員來說，將DWF文件轉換為PNG格式的能力至關重要。這種轉換對于建筑、工程和施工等行業尤其重要，因為這些行業需要以通用格式共享和查看圖紙。通過.NET 使用 Aspose.CAD for JavaScript，開發人員可以輕松地在 JavaScript 中將 DWF 轉換為 PNG，確保高質量輸出并無縫集成到現有工作流程中。這個強大的 JS API 提供了靈活性和高級自定義選項，使其成為各種應用程序的理想選擇。

JavaScript 庫安裝

要通過 .NET 使用 Aspose.CAD for JavaScript ，您可以下載。或者，您可以使用以下命令安裝它：

npm i aspose-cad

您還需要安裝。

使用 Javascript 將 DWF 轉換為 PNG - 代碼片段

要通過 .NET使用Aspose.CAD for JavaScript將 DWF 轉換為 JavaScript 中的 PNG，請按照以下步驟操作：

通過調用arrayBuffer函數將文件轉換為數組緩沖區。
通過調用Image.save方法將 DWF 轉換為 PNG。
調用createObjectUR方法從導出的文件創建圖像 URL。

以下是示例 JavaScript 代碼片段：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CAD to Image Converter</title>
        <script src="/node_modules/aspose-cad/dotnet.js"></script>
        <script type="module" src="/node_modules/aspose-cad/es2015/index-js.js"></script>
        <style>
            body {
                font-family: Arial, sans-serif;
                text-align: center;
                margin: 50px;
            }
            input, button {
                margin-top: 15px;
            }
            img {
                display: block;
                margin-top: 20px;
                max-width: 100%;
                height: auto;
            }
        </style>
    </head>
    <body>
        <h2>DWF to PNG Converter</h2>
        <input id="file" type="file" />
        <img id="image" />
        <br>
        <button id="downloadBtn" style="display: none;">Download Image</button>

        <script>
            window.onload = function () {
                // Get references to DOM elements
                const fileInput = document.getElementById('file');
                const downloadBtn = document.getElementById('downloadBtn');
                const imageElement = document.getElementById('image');

                // Listen for file selection
                fileInput.addEventListener('change', async function (event) {
                    const file = event.target.files[0]; // Get selected file
                    if (!file) return; // Exit if no file is selected

                    try {
                        // Convert file to array buffer by calling the arrayBuffer function.
                        const arrayBuffer = await file.arrayBuffer();
                        const array = new Uint8Array(arrayBuffer);
                        
                        console.log("Detecting file format...");
                        const fileFormat = Aspose.CAD.Image.getFileFormat(array);
                        console.log("File Format:", fileFormat);

                        console.log("Loading CAD file...");
                        const imgFile = await Aspose.CAD.Image.load(array);
                        console.log("CAD Image Loaded Successfully:", imgFile);

                        console.log("Converting CAD to Image...");
                        // Convert DWF to PNG by calling the Image.save method.
                        const exportedFile = await Aspose.CAD.Image.save(imgFile, new Aspose.CAD.PngOptions());

                        // Invoke the createObjectURL method to create image URL from the exported file.
                        const blob = new Blob([exportedFile], { type: 'application/octet-stream' });
                        const imageUrl = URL.createObjectURL(blob);
                        imageElement.src = imageUrl;

                        // Show download button
                        downloadBtn.style.display = "block";
                        downloadBtn.onclick = function () {
                            const a = document.createElement("a");
                            a.href = imageUrl;
                            a.download = "converted-image.png";
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                        };

                        console.log("? DWF to PNG Conversion Successful");
                    } catch (error) {
                        console.error("? Error:", error);
                    }
                });
            };
        </script>
    </body>
</html>

輸出：運行服務器后，您將在 Web 瀏覽器中看到以下頁面： dwf 轉 png