使用Javascript打印SVG HTML
使用Javascript打印SVG HTML
提问于 2018-07-27 04:04:07
我在Angular 2+代码中有一个SVG元素。
我想让用户可以打印出以下SVG元素。
<div class="floor-plan" id="printSectionId2"
(drop)="onDrop($event)"
(dragover)="onDragOverOrEnter($event)"
(dragenter)="onDragOverOrEnter($event)">
<svg id="svgObject" [attr.width]="svgWidth + 'px'" [attr.height]="svgHeight + 'px'">
<ng-container *ngIf="floorPlan && floorPlan.layout">
<rect [attr.x]="floorPlan.x"
[attr.y]="floorPlan.y"
[attr.width]="floorPlan.width"
[attr.height]="floorPlan.height"
class="boundary">
</rect>
<ng-container *ngFor="let t of floorPlan.layout.tables; trackBy: trackByTables">
<g class="dining-table"
[attr.transform]="'translate(' + t.x + ' ' + t.y + ')'"
[class.assigned]="t.isOccupied"
[class.arrival]="t.isArrival"
[class.hasSpecialInformation]="t.hasSpecialInformation"
[class.hasOnlyBreakfast]="t.hasOnlyBreakfast">
<rect *ngIf="t.shape === 'rectangle'"
[attr.width]="t.width"
[attr.height]="t.height"
[attr.transform]="'rotate(' + t.rotation + ' ' + (t.width/2) + ' ' + (t.height/2) + ')'"
[attr.data-tableId]="t.id">
<title>Tisch {{t.number}}</title>
</rect>
<image *ngIf="t.isArrival" xlink:href="http://kommis.net/wp-content/uploads/2018/07/arrival-white.png" x="5" y="25" height="25px" width="25px" opacity="50"></image>
<text *ngIf="t.shape === 'rectangle'"
[attr.x]="t.width * 0.05"
dominant-baseline="hanging"
[attr.data-tableId]="t.id">
<tspan x="5" class="table-number">{{t.number}}</tspan>
<tspan x="5" dy="15" class="guest-info">{{t.guestInfo}}</tspan>
</text>
<ellipse *ngIf="t.shape === 'circle'"
[attr.rx]="t.width / 2"
[attr.ry]="t.height / 2"
[attr.data-tableId]="t.id">
<title>Tisch {{t.number}}</title>
</ellipse>
<text *ngIf="t.shape === 'circle'"
[attr.dy]="t.width / 2 * -0.5"
text-anchor="middle"
[attr.data-tableId]="t.id">
<tspan x="0" class="table-number">{{t.number}}</tspan>
<tspan x="0" dy="15" class="guest-info">{{t.guestInfo}}</tspan>
</text>
</g>
</ng-container>
</ng-container>
</svg>
</div>下面是CSS：
.floor-plan {
background-color: #eaf3f3;
border-radius: 2px;
}
.floor-plan svg {
/* Is needed because svg is by default inline-block and thus
the wrapping div would get higher by some extra pixels.
See https://stackoverflow.com/questions/24626908/*/
display: block;
}
.floor-plan .boundary {
fill: transparent;
stroke: #0A7A74;
stroke-width: 2px;
}
.dining-table rect,
.dining-table ellipse {
fill: transparent;
stroke: #0A7A74;
stroke-width: 2px;
}
.dining-table.assigned rect,
.dining-table.assigned ellipse {
fill: #0a7a74;
}
.dining-table.assigned tspan {
fill: #ffffff;
}
.dining-table.hasSpecialInformation rect,
.dining-table.hasSpecialInformation ellipse {
stroke: red;
}
.dining-table.hasOnlyBreakfast rect,
.dining-table.hasOnlyBreakfast ellipse {
fill: #0d2f2e;
}
.dining-table image {
opacity: 0.5;
}
tspan.table-number {
fill: #666;
}
tspan.guest-info {
fill: #333;
font-weight: bolder;
}元素在屏幕上如下所示：
我想问，让用户打印出这个SVG图形的最好方法是什么？
目前，我正在使用以下JS代码进行尝试：
printToCart2(svgObject: string) {
let popupWinindow;
let innerContents = document.getElementById(svgObject).innerHTML;
console.log(innerContents);
popupWinindow = window.open('', '_blank', 'width=1000,height=1000,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
popupWinindow.document.open();
popupWinindow.document.write('<html><head><style></style></head><body onload="window.print()">' + innerContents + '</html>');
popupWinindow.document.close();
}不幸的是，我得到了这个黑色的方块：
更新
@KoshVery给出的答案给了我想要的结果：
更新
为了使CSS起作用，我必须将它添加到行Popupwindow.document.write()中，如下所示：
popupWinindow.document.write('<html><head><style>.floor-plan { background-color: #eaf3f3; border-radius: 2px; } .floor-plan svg { /* Is needed because svg is by default inline-block and thusthe wrapping div would get higher by some extra pixels.See https://stackoverflow.com/questions/24626908/*/ display: block; } .floor-plan .boundary { fill: transparent; stroke: #0A7A74; stroke-width: 2px; } .dining-table rect, .dining-table ellipse { fill: transparent; stroke: #0A7A74; stroke-width: 2px; } .dining-table.assigned rect, .dining-table.assigned ellipse { fill: #0a7a74; } .dining-table.assigned tspan { fill: #ffffff; } .dining-table.hasSpecialInformation rect, .dining-table.hasSpecialInformation ellipse { stroke: red; } .dining-table.hasOnlyBreakfast rect, .dining-table.hasOnlyBreakfast ellipse { fill: #0d2f2e; } .dining-table image { opacity: 0.5; } tspan.table-number { fill: #666; } tspan.guest-info {fill: #333; font-weight: bolder; } </style></head><body onload="window.print()">' + innerContents + '</html>');
最终的结果是：
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-27 04:21:11
你必须得到你的svg的outerHTML
let innerContents = document.getElementById(svgObject).outerHTML;
或
如果你在这里让innerHTML把它封装到<svg>中：
popupWinindow.document.write('<html><head><style></style></head><body onload="window.print()"><svg>' + innerContents + '</svg></html>');
更新
您可以像这样简化打印流程：
<div>
<svg onclick="window.print(this)" id="svgObject" width="100" height="100">
<circle fill="pink" cx="50" cy="50" r="45"/>
</svg>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51546704
复制相关文章
相似问题
腾讯云开发者
