Print SVG HTML with Javascript

I have an SVG element in Angular 2+ code.

I want to give the user the possibility to print out the following SVG element.

<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=".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:

.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 /*/
  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?

At the moment I am trying it with the following JS code:

 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:

Update

In order to make the CSS work, I had to add it in the line Popupwindow.document.write() like so:

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 /*/  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>');

I have an SVG element in Angular 2+ code.

I want to give the user the possibility to print out the following SVG element.

<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/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:

.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./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?

At the moment I am trying it with the following JS code:

 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:

Update

In order to make the CSS work, I had to add it in the line Popupwindow.document.write() like so:

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./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:

Share Improve this question edited Jul 27, 2018 at 15:24 asked Jul 26, 2018 at 20:04 user9408779

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

You have to get outerHTML of your svg:

let innerContents = document.getElementById(svgObject).outerHTML;

OR
If you've got innerHTML wrap it into <svg> here:

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Print SVG HTML with Javascript - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)