4691751424848_.pic.jpg
一、canvas
<div class="canvas-box">
<canvas width="600" height="600" id="canvas" ref="canvas"></canvas>
</div>
coordinates: {
orgWidth: 456,
prism_tablesInfo: [
{
cellInfos: [
{
pos: [
{
x: 0,
y: 0,
},
{
x: 288,
y: 0,
},
{
x: 288,
y: 27,
},
{
x: 0,
y: 27,
},
],
yec: 0,
xec: 0,
ysc: 0,
tableCellId: 0,
xsc: 0,
word: "un 94_02_cms 20_cs_wk_order",
},
{
pos: [
{
x: 288,
y: 0,
},
{
x: 455,
y: 0,
},
{
x: 455,
y: 27,
},
{
x: 288,
y: 27,
},
],
yec: 0,
xec: 1,
ysc: 0,
tableCellId: 1,
xsc: 1,
word: "95598工单",
},
{
pos: [
{
x: 1,
y: 27,
},
{
x: 288,
y: 27,
},
{
x: 288,
y: 47,
},
{
x: 0,
y: 47,
},
],
yec: 1,
xec: 0,
ysc: 1,
tableCellId: 2,
xsc: 0,
word: "un 94_02_cms 20_cs_wk_order_hnd l",
},
{
pos: [
{
x: 288,
y: 27,
},
{
x: 455,
y: 27,
},
{
x: 455,
y: 47,
},
{
x: 288,
y: 47,
},
],
yec: 1,
xec: 1,
ysc: 1,
tableCellId: 3,
xsc: 1,
word: "95598工单处理",
},
],
xCellSize: 2,
tableId: 0,
yCellSize: 2,
},
],
prism_wnum: 4,
width: 456,
angle: 0,
orgHeight: 48,
prism_version: "1.0.9",
prism_wordsInfo: [
{
pos: [
{
x: 6,
y: 7,
},
{
x: 249,
y: 7,
},
{
x: 249,
y: 25,
},
{
x: 6,
y: 25,
},
],
x: 118,
width: 17,
tableId: 0,
tableCellId: 0,
angle: -90,
y: -105,
word: "un 94_02_cms 20_cs_wk_order",
direction: 0,
height: 243,
},
{
pos: [
{
x: 291,
y: 8,
},
{
x: 365,
y: 8,
},
{
x: 365,
y: 24,
},
{
x: 291,
y: 24,
},
],
x: 320,
width: 16,
tableId: 0,
tableCellId: 1,
angle: -90,
y: -21,
word: "95598工单",
direction: 0,
height: 74,
},
{
pos: [
{
x: 6,
y: 31,
},
{
x: 246,
y: 32,
},
{
x: 246,
y: 47,
},
{
x: 6,
y: 47,
},
],
x: 117,
width: 15,
tableId: 0,
tableCellId: 2,
angle: -89,
y: -81,
word: "un 94_02_cms 20_cs_wk_order_hnd l",
direction: 0,
height: 241,
},
{
pos: [
{
x: 290,
y: 30,
},
{
x: 396,
y: 31,
},
{
x: 396,
y: 47,
},
{
x: 290,
y: 46,
},
],
x: 336,
width: 16,
tableId: 0,
tableCellId: 3,
angle: -90,
y: -14,
word: "95598工单处理",
direction: 0,
height: 106,
},
],
content:
"un 94_02_cms 20_cs_wk_order 95598工单 un 94_02_cms 20_cs_wk_order_hnd l 95598工单处理 ",
sid: "1ddb04643bafbef7ad3c4907bfad2e6f6fb5f6459a6fd69e288fb7f9f65a00de1b99c690",
height: 48,
},
二、canvas+ 样式，生成可以复制的表格
4701751440596_.pic.jpg
<template>
<div class="main-container">
<div class="canvas-box" id="canvas-box" style="position: relative">
<canvas width="200" height="200" id="myCanvas" ref="myCanvas"> </canvas>
</div>
</div>
</template>
<script>
export default {
name: "Indexvuemodel",
data() {
return {
coordinates: {
orgWidth: 456,
prism_tablesInfo: [
{
cellInfos: [
{
pos: [
{
x: 0,
y: 0,
},
{
x: 288,
y: 0,
},
{
x: 288,
y: 27,
},
{
x: 0,
y: 27,
},
],
yec: 0,
xec: 0,
ysc: 0,
tableCellId: 0,
xsc: 0,
word: "un 94_02_cms 20_cs_wk_order",
},
{
pos: [
{
x: 288,
y: 0,
},
{
x: 455,
y: 0,
},
{
x: 455,
y: 27,
},
{
x: 288,
y: 27,
},
],
yec: 0,
xec: 1,
ysc: 0,
tableCellId: 1,
xsc: 1,
word: "95598工单",
},
{
pos: [
{
x: 1,
y: 27,
},
{
x: 288,
y: 27,
},
{
x: 288,
y: 47,
},
{
x: 0,
y: 47,
},
],
yec: 1,
xec: 0,
ysc: 1,
tableCellId: 2,
xsc: 0,
word: "un 94_02_cms 20_cs_wk_order_hnd l",
},
{
pos: [
{
x: 288,
y: 27,
},
{
x: 455,
y: 27,
},
{
x: 455,
y: 47,
},
{
x: 288,
y: 47,
},
],
yec: 1,
xec: 1,
ysc: 1,
tableCellId: 3,
xsc: 1,
word: "95598工单处理",
},
],
xCellSize: 2,
tableId: 0,
yCellSize: 2,
},
],
prism_wnum: 4,
width: 456,
angle: 0,
orgHeight: 48,
prism_version: "1.0.9",
prism_wordsInfo: [
{
pos: [
{
x: 6,
y: 7,
},
{
x: 249,
y: 7,
},
{
x: 249,
y: 25,
},
{
x: 6,
y: 25,
},
],
x: 118,
width: 17,
tableId: 0,
tableCellId: 0,
angle: -90,
y: -105,
word: "un 94_02_cms 20_cs_wk_order",
direction: 0,
height: 243,
},
{
pos: [
{
x: 291,
y: 8,
},
{
x: 365,
y: 8,
},
{
x: 365,
y: 24,
},
{
x: 291,
y: 24,
},
],
x: 320,
width: 16,
tableId: 0,
tableCellId: 1,
angle: -90,
y: -21,
word: "95598工单",
direction: 0,
height: 74,
},
{
pos: [
{
x: 6,
y: 31,
},
{
x: 246,
y: 32,
},
{
x: 246,
y: 47,
},
{
x: 6,
y: 47,
},
],
x: 117,
width: 15,
tableId: 0,
tableCellId: 2,
angle: -89,
y: -81,
word: "un 94_02_cms 20_cs_wk_order_hnd l",
direction: 0,
height: 241,
},
{
pos: [
{
x: 290,
y: 30,
},
{
x: 396,
y: 31,
},
{
x: 396,
y: 47,
},
{
x: 290,
y: 46,
},
],
x: 336,
width: 16,
tableId: 0,
tableCellId: 3,
angle: -90,
y: -14,
word: "95598工单处理",
direction: 0,
height: 106,
},
],
content:
"un 94_02_cms 20_cs_wk_order 95598工单 un 94_02_cms 20_cs_wk_order_hnd l 95598工单处理 ",
sid: "1ddb04643bafbef7ad3c4907bfad2e6f6fb5f6459a6fd69e288fb7f9f65a00de1b99c690",
height: 48,
},
xCellSize: 0,
yCellSize: 0,
widths: "",
heights: "",
dataList: [],
widthLists: [],
info: {},
items: "",
fileList: [],
};
},
mounted() {
this.handleSuccessDoc();
},
methods: {
canvasTable() {
let points = this.coordinates.prism_tablesInfo[0].cellInfos;
let newPoints = [];
points.forEach((aa, indexs) => {
aa.pos.forEach((bb, index) => {
newPoints.push(bb);
});
});
// 获取Canvas元素
const canvasbox = document.getElementById("canvas-box");
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
canvas.width = this.widths;
canvas.height = this.heights;
// 清空画布（可选）
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制表格线条
points.forEach((point, i) => {
let newArr = point.pos;
let textwidth = newArr[1].x - newArr[0].x;
let textheight = newArr[2].y - newArr[1].y;
const span = document.createElement("div");
span.className = "table-span";
span.textContent = point.word;
span.style.position = "absolute";
span.style.left = `${newArr[0].x}px`;
span.style.top = `${newArr[0].y}px`;
span.style.fontSize = "11px";
span.style.display = "flex";
span.style.alignItems = "center";
span.style.width = `${textwidth}px`;
span.style.height = `${textheight}px`;
span.style.border = "1px solid #000";
canvasbox.appendChild(span);
});
},
//清除画布，移除表格结构
submitUpload(event) {
var elements = document.querySelectorAll("#canvas-box .table-span");
if (elements.length > 0) {
elements.forEach(function (element) {
element.remove();
});
}
},
// 上传成功回调
handleSuccessDoc() {
// jiekou((res) => {
this.items = [];
// if (res.code == 200) {
// this.coordinates = res.data;
let newArr = [];
this.heights = this.coordinates.orgHeight;
this.widths = this.coordinates.orgWidth;
this.yCellSize = this.coordinates.prism_tablesInfo[0].xCellSize;
this.xCellSize = this.coordinates.prism_tablesInfo[0].yCellSize;
for (let i = 0; i < this.xCellSize; i++) {
let newneiArr = [];
for (let j = 0; j < this.yCellSize; j++) {
let str = this.coordinates.prism_tablesInfo[0].cellInfos[j].word;
newneiArr.push(str);
}
newArr.push([...newneiArr]);
}
this.dataList = newArr;
let widthList = [];
this.coordinates.prism_wordsInfo.forEach((item) => {
let widthItem = item.height;
widthList.push(widthItem);
});
let newValue = [];
let num = 0;
for (let i = 0; i <= this.xCellSize; i++) {
newValue.push(widthList[i]);
num = num + Number(widthList[i]);
}
this.widthLists = newValue;
this.canvasTable();
// } else {
// this.$message.error(res.msg);
// }
// });
}
},
};
</script>
<style lang="scss" scoped>
.canvas-box {
// background: green;
// width: 100%;
// height: 100%;
overflow: auto;
margin-top:300px;
margin-right: 20px;
}
#canvas {
/* display:flex; */
padding: 10px 20px;
// overflow-y: auto;
// overflow-x: auto;
}
</style>
