@mlightcad/libdxfrw-web
Version:
a webassembly version of libdxfrw, which can read/write DXF files (in both formats, ascii and binary form) and read DWG files from AutoCAD R14 to AutoCAD 2020.
260 lines (214 loc) • 10.8 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Read File Content</title>
</head>
<body>
<h1>Select a DXF/DWG file</h1>
<input type="file" id="fileInput" accept=".dxf, .dwg" />
<button id="convertBtn" disabled>Convert DWG to DXF</button>
<!-- Element to display Layer Names -->
<h2>Layer Names:</h2>
<ul id="layerNameList"></ul>
<!-- Element to display Line Types -->
<h2>Line Types:</h2>
<ul id="lineTypeList"></ul>
<!-- Element to display Text Styles -->
<h2>Text Styles:</h2>
<ul id="textStyleList"></ul>
<!-- Element to display Dimensionn Styles -->
<h2>Dimension Styles:</h2>
<ul id="dimStyleList"></ul>
<!-- Element to display Viewports -->
<h2>Viewports:</h2>
<ul id="viewportList"></ul>
<!-- Element to display Layouts -->
<h2>Layouts:</h2>
<ul id="layoutList"></ul>
<!-- Element to display Blocks -->
<h2>Blocks:</h2>
<ul id="blockList"></ul>
<!-- Element to display Images -->
<h2>Images:</h2>
<ul id="imageList"></ul>
<!-- Element to display Entity Stats -->
<h2>Entities:</h2>
<ul id="entityList"></ul>
<!-- Element to display vertexes and other information in the first polyline entity -->
<h2>The First Polyline:</h2>
<ul id="entityInfoList"></ul>
<ul id="vertexList"></ul>
<script type="module">
// load libdxfrw webassembly module
const libdxfrw = await createModule();
const printItems = (id, items, itemName = 'name', subItemName = undefined) => {
// Clear previous item list
const listElement = document.getElementById(id);
listElement.innerHTML = '';
// Create list item for item
for (let index = 0, size = items.size(); index < size; ++index) {
const item = items.get(index);
const li = document.createElement('li');
if (subItemName) {
li.textContent = `${item[itemName]}: ${item[subItemName].size()}`;
} else {
li.textContent = item[itemName];
}
listElement.appendChild(li);
}
}
const printEntityInfo = (id, entity) => {
// Clear previous item list
const listElement = document.getElementById(id);
listElement.innerHTML = '';
const propNames = ["handle", "layer", "lineType", "colorName", "proxyGraphics", "extPoint"];
propNames.forEach((name) => {
const li = document.createElement('li');
if (name == "extPoint") {
const coord = entity[name]
if (coord) {
li.textContent = `${name}: (${coord.x}, ${coord.y}, ${coord.z})`;
listElement.appendChild(li);
}
} else {
li.textContent = `${name}: ${entity[name]}`;
listElement.appendChild(li);
}
});
}
const printVertexesInTheFirstPolyline = (id, polyline) => {
// Clear previous item list
const listElement = document.getElementById(id);
listElement.innerHTML = '';
const vertexes = polyline.getVertexList();
for (let index = 0, size = vertexes.size(); index < size; ++index) {
const vertex = vertexes.get(index);
const li = document.createElement('li');
li.textContent = `(x: ${vertex.x}, y: ${vertex.y}, bulge: ${vertex.bulge})`;
listElement.appendChild(li);
}
}
const printEntityStats = (id, entities) => {
// Clear previous item list
const listElement = document.getElementById(id);
listElement.innerHTML = '';
const group = new Map();
let isFoundPolyline = false;
for (let index = 0, size = entities.size(); index < size; ++index) {
const entity = entities.get(index);
// If the group for the given eType does not exist, initialize the count to 0
const typeName = entity.eType.constructor.name;
if (!group.has(typeName)) {
group.set(typeName, 0);
}
if (!isFoundPolyline && (entity.eType == libdxfrw.DRW_ETYPE.LWPOLYLINE || entity.eType == libdxfrw.DRW_ETYPE.POLYLINE)) {
printEntityInfo("entityInfoList", entity);
printVertexesInTheFirstPolyline("vertexList", entity);
isFoundPolyline = true;
}
// Increment the count for the current group
group.set(typeName, group.get(typeName) + 1);
}
// Create list item for item
group.forEach((value, key) => {
const li = document.createElement('li');
li.textContent = `${key}: ${value}`;
listElement.appendChild(li);
});
}
const fileInput = document.getElementById('fileInput');
const convertButton = document.getElementById('convertBtn');
// Function to convert DWG to DXF after clicking the button
convertButton.addEventListener('click', function () {
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const fileContent = event.target.result;
// Parse DWG file
const database = new libdxfrw.DRW_Database();
const fileHandler = new libdxfrw.DRW_FileHandler();
fileHandler.database = database;
if (!fileHandler.fileImport(fileContent, database, false, false)) {
console.error('Failed to parse the selected file!');
}
// Write as DXF string
const dxfContent = fileHandler.fileExport(libdxfrw.DRW_Version.AC1021, false, database, false);
// Manually signal that a C++ object is no longer needed and can be deleted.
database.delete();
fileHandler.delete();
// Create a new Blob with the file content
const blob = new Blob([dxfContent], { type: 'text/plain' });
// Create a link element to trigger the download
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'converted.dxf'; // The name of the new file
// Trigger the file download
link.click();
};
// Read the selected file as an ArrayBuffer (binary data)
reader.readAsArrayBuffer(file);
});
// Function to handle file input change event
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
// Get file extension
const fileExtension = file.name.split('.').pop().toLowerCase();
// Create a FileReader to read the file
const reader = new FileReader();
// Define the callback function for when the file is read
reader.onload = function(e) {
const fileContent = e.target.result;
try {
const database = new libdxfrw.DRW_Database();
const fileHandler = new libdxfrw.DRW_FileHandler();
fileHandler.database = database;
if (fileExtension == 'dxf') {
const dxf = new libdxfrw.DRW_DxfRW(fileContent);
// Uncomment out the following line if you want to show debug info
// dxf.setDebug(libdxfrw.DRW_Dbg_Level.Debug);
const result = dxf.read(fileHandler, false);
// Manually signal that a C++ object is no longer needed and can be deleted.
dxf.delete();
} else if (fileExtension == 'dwg') {
const dwg = new libdxfrw.DRW_DwgR(fileContent);
// Uncomment out the following line if you want to show debug info
// dwg.setDebug(libdxfrw.DRW_Dbg_Level.Debug);
const result = dwg.read(fileHandler, false);
// Manually signal that a C++ object is no longer needed and can be deleted.
dwg.delete();
convertButton.disabled = false;
}
printItems('layerNameList', fileHandler.database.layers);
printItems('lineTypeList', fileHandler.database.lineTypes);
printItems('textStyleList', fileHandler.database.textStyles);
printItems('dimStyleList', fileHandler.database.dimStyles);
printItems('viewportList', fileHandler.database.viewports);
printItems('layoutList', fileHandler.database.layouts, 'layoutName');
printItems('blockList', fileHandler.database.blocks, 'name', 'entities');
printItems('imageList', fileHandler.database.images, 'path');
printEntityStats('entityList', fileHandler.database.mBlock.entities);
// Manually signal that a C++ object is no longer needed and can be deleted.
database.delete();
fileHandler.delete();
} catch (error) {
console.error('Error processing DXF/DWG file: ', error);
}
};
// Read the file
if (fileExtension == 'dxf') {
reader.readAsText(file);
} else if (fileExtension == 'dwg') {
reader.readAsArrayBuffer(file);
}
} else {
convertButton.disabled = true;
console.log('No file selected');
}
});
</script>
<script src="libdxfrw.js"></script>
</body>
</html>