CAD處理控件Aspose.CAD教程：使用 Javascript 將 DWF 轉(zhuǎn)換為 PNG

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

概述：對(duì)于使用 CAD 圖紙的開發(fā)人員來(lái)說(shuō)，將DWF文件轉(zhuǎn)換為PNG格式的能力至關(guān)重要。通過(guò).NET 使用 Aspose.CAD for JavaScript，開發(fā)人員可以輕松地在 JavaScript 中將 DWF 轉(zhuǎn)換為 PNG，確保高質(zhì)量輸出并無(wú)縫集成到現(xiàn)有工作流程中。

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

相關(guān)鏈接：

概述

對(duì)于使用 CAD 圖紙的開發(fā)人員來(lái)說(shuō)，將DWF文件轉(zhuǎn)換為PNG格式的能力至關(guān)重要。這種轉(zhuǎn)換對(duì)于建筑、工程和施工等行業(yè)尤其重要，因?yàn)檫@些行業(yè)需要以通用格式共享和查看圖紙。通過(guò).NET 使用 Aspose.CAD for JavaScript，開發(fā)人員可以輕松地在 JavaScript 中將 DWF 轉(zhuǎn)換為 PNG，確保高質(zhì)量輸出并無(wú)縫集成到現(xiàn)有工作流程中。這個(gè)強(qiáng)大的 JS API 提供了靈活性和高級(jí)自定義選項(xiàng)，使其成為各種應(yīng)用程序的理想選擇。

JavaScript 庫(kù)安裝

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

npm i aspose-cad

您還需要安裝。

使用 Javascript 將 DWF 轉(zhuǎn)換為 PNG - 代碼片段

要通過(guò) .NET使用Aspose.CAD for JavaScript將 DWF 轉(zhuǎn)換為 JavaScript 中的 PNG，請(qǐng)按照以下步驟操作：

通過(guò)調(diào)用arrayBuffer函數(shù)將文件轉(zhuǎn)換為數(shù)組緩沖區(qū)。
通過(guò)調(diào)用Image.save方法將 DWF 轉(zhuǎn)換為 PNG。
調(diào)用createObjectUR方法從導(dǎo)出的文件創(chuàng)建圖像 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>

輸出：運(yùn)行服務(wù)器后，您將在 Web 瀏覽器中看到以下頁(yè)面： dwf 轉(zhuǎn) png