CAD处理控件Aspose.CAD教程：使用 Javascript 将 DWF 转换为 PNG

翻译|使用教程|编辑：吉炜炜|2025-02-27 17:06:52.120|阅读 6 次

概述：对于使用 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