VUE使用DXFParser组件解析dxf文件生成图片

<template><div><input type="file" @change="handleFileChange" /></div><el-table :data="tableData" style="width: 100%"><el-table-column prop="Control_No" label="序号" width="180" /><el-table-column prop="Index" label="编号" width="180" /><el-table-column prop="ID" label="ID" width="180" /><el-table-column prop="BH" label="编号" width="180" /><el-table-column prop="Piece_Name" label="部位名称" width="180" /><el-table-column prop="data" label="日期" />'<el-table-column label="精品图片"><template v-slot="scope"><!-- 在这里访问tableData.vertices中的数据 --><div id="imageContainer"><!-- 使用scope.row来获取当前行的数据 --><img :src="generateCanvasImage(scope.row.vertices)" alt="精品图片" /></div></template></el-table-column></el-table>
</template><script>
import DXFParser from 'dxf-parser';export default {data() {return {tableData: [],}},methods: {handleFileChange(event) {const file = event.target.files[0];const reader = new FileReader();reader.onload = (e) => {const contents = e.target.result;// const decoder = new TextDecoder('utf-8');// const decodedContents = decoder.decode(contents);const parser = new DXFParser();const dxf = parser.parseSync(contents);// 处理解析后的DXF数据this.processDXF(dxf);// console.log(this.processDXF(dxf))};reader.readAsText(file);// reader.readAsArrayBuffer(file)},processDXF(dxf) {// 在这里处理解析后的DXF数据console.log(dxf);this.tableData.splice(0, this.tableData.length);// 示例：绘制一些图形到canvas上console.log(dxf.blocks)// dxf.blocks.forEach((e)=>{//   console.log(e)// })var Control_No = 1;for (var key in dxf.blocks) {if ('entities' in dxf.blocks[key]) {// console.log(dxf.blocks[key].entities[0].type)for (var i in dxf.blocks[key].entities) {if ("TEXT" === dxf.blocks[key].entities[i].type) {var ver = [];for (var w = 4; w < dxf.blocks[key].entities.length; w++) {if (dxf.blocks[key].entities[w].vertices) {dxf.blocks[key].entities[w].vertices[0].new = truever = ver.concat(dxf.blocks[key].entities[w].vertices);}}console.log(ver.concat(dxf.blocks[key].entities[5].vertices))var newItem = {Control_No: Control_No++,Index: key,ID: dxf.blocks[key].entities[0].text,BH: dxf.blocks[key].entities[1].text,Piece_Name: dxf.blocks[key].entities[2].text,vertices: ver,data: dxf.blocks[key].entities[3].text};this.tableData.push(newItem); // 将新对象添加到tableData数组中break;}}}}},generateCanvasImage(vertices) {// 获取Canvas元素var canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");// 设置多边形的颜色var color = "#FF0000"; // 十六进制颜色值，例如 16711680 对应的颜色为红色// 顶点坐标列表// 计算图形的包围框var minX = Number.MAX_VALUE;var minY = Number.MAX_VALUE;var maxX = Number.MIN_VALUE;var maxY = Number.MIN_VALUE;for (var i = 0; i < vertices.length; i++) {var vertex = vertices[i];minX = Math.min(minX, vertex.x);minY = Math.min(minY, vertex.y);maxX = Math.max(maxX, vertex.x);maxY = Math.max(maxY, vertex.y);}// 计算缩放因子var width = maxX - minX;var height = maxY - minY;var scale = Math.min(canvas.width / width, canvas.height / height);// 绘制多边形ctx.beginPath();ctx.strokeStyle = color; // 设置描边颜色ctx.lineWidth = 1; // 设置线宽// 移动到第一个顶点ctx.moveTo((vertices[0].x - minX) * scale, (vertices[0].y - minY) * scale);// 依次连接顶点for (var e = 1; e < vertices.length; e++) {if (vertices[e].new === true) {console.log("true");// 如果条件成立，移动到当前顶点位置，不连接上一次的顶点ctx.moveTo((vertices[e].x - minX) * scale, (vertices[e].y - minY) * scale);} else {// 否则继续连接顶点ctx.lineTo((vertices[e].x - minX) * scale, (vertices[e].y - minY) * scale);}}// 关闭多边形路径ctx.closePath();// 绘制多边形ctx.stroke();// 将Canvas内容转换为图片路径var imgDataURL = canvas.toDataURL("image/png");// 在HTML页面上显示图片var imgElement = document.createElement("img");imgElement.src = imgDataURL;return imgElement.src// 将图片元素添加到页面中的图片容器// var container = document.getElementById("imageContainer");// container.appendChild(imgElement);}}
}
</script>

大致效果图如果大家有疑问欢迎评论我将在更新问题解析！