使用Javascript打印SVG HTML
[英]Print SVG HTML with Javascript
问题描述
I have an SVG element in Angular 2+ code. 
我在Angular 2+代码中有一个SVG元素。
I want to give the user the possibility to print out the following SVG element. 我想给用户打印以下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>
Here the CSS: 这是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;
}
The element looks like this on the screen: 该元素在屏幕上看起来像这样：
I wanted to ask, what is the best way to let users print out this SVG graphic? 我想问，让用户打印出此SVG图形的最佳方法是什么？
At the moment I am trying it with the following JS code: 目前，我正在尝试使用以下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();
}
Which gives me, unfortunately, this black square: 不幸的是，这给了我这个黑色正方形：
Update 更新
The answer given by @KoshVery gives me the desired result: @KoshVery给出的答案给了我想要的结果：
Update 更新
In order to make the CSS work, I had to add it in the line Popupwindow.document.write() like so: 为了使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>');
Which ends up in the final result: 最终得到最终结果：
1 个解决方案
解决方案1
3 已采纳 2018-07-26 20:21:10
You have to get outerHTML of your svg : 你必须让outerHTML您的svg ：
let innerContents = document.getElementById(svgObject).outerHTML;
OR 要么
If you've got innerHTML wrap it into <svg> here: 如果您具有innerHTML ，请在此处将其包装到<svg> ：
popupWinindow.document.write('<html><head><style></style></head><body onload="window.print()"><svg>' + innerContents + '</svg></html>');
Update 更新
You might simplify your print flow like this: 您可以这样简化打印流程：
<div> <svg onclick="window.print(this)" id="svgObject" width="100" height="100"> <circle fill="pink" cx="50" cy="50" r="45"/> </svg> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.