Как динамически распечатать вывод SVG печати - PullRequest
Новая
       21

Как динамически распечатать вывод SVG печати

0 голосов
/ 02 января 2019

У меня есть большие рисунки SVG, с неизвестными размерами в начале.Я хочу напечатать их на нескольких страницах;но количество страниц не известно изначально.Поэтому мне нужно определиться с количеством страниц в Javascript после того, как я увеличу размер чертежа и добавлю соответственно элементы svg.

Есть хороший пример на https://codepen.io/anon/pen/roYXVJ, который представляет собой «статический» лист,т.е. размер и количество страниц фиксируются заранее.Упрощенная версия кода (без стрелок и индексных букв) выглядит следующим образом: 

<figure class="svg-container">
  <!-- The actual graphic is a 3:2 image
       which will be wrapped in a scrolling
       container on screen. -->
  <svg class="screen" width="18in" height="12in"
       viewBox="0 0 1800 1200">
    <g id="graphic"><!-- 
      Actual graphic goes here.  I'm using a script to generate it. 
--></g>
  </svg>
  <!-- For printing in landscape mode,
       the graphic is divided into four
       overlapping quadrants which will
       each fit on a letter/A4 page
       without scaling.  The 1000*700 viewBox
       is equivalent to 10in*7in of the
       onscreen dimensions. -->
  <svg class="print landscape" viewBox="0 0 1000 700">
    <use xlink:href="#graphic" />
  </svg>
  <svg class="print landscape" viewBox="800 0 1000 700">
    <use xlink:href="#graphic" />
  </svg>
  <svg class="print landscape" viewBox="0 500 1000 700">
    <use xlink:href="#graphic" />
  </svg>
  <svg class="print landscape" viewBox="800 500 1000 700">
    <use xlink:href="#graphic" />
  </svg>

  <!-- For printing in portrait mode,
       the graphic is scaled down slightly
       to fit on two pages.  Again,
       the content of each page will 
       overlap slightly. -->
  <svg class="print portrait" viewBox="0 0 1000 1200">
    <use xlink:href="#graphic" />
  </svg>
  <svg class="print portrait" viewBox="800 0 1000 1200">
    <use xlink:href="#graphic" />
  </svg>
</figure>

<script>

var doc = document;
var g = doc.getElementById("graphic");
var svgNS = g.namespaceURI;
var r, t;

for (var i=0; i<18; i++){
  for (var j=0; j<12; j++) {
    r = doc.createElementNS(svgNS, "rect");
    r.setAttribute("width", "80");
    r.setAttribute("height", "80");
    r.setAttribute("x", (i*100 + 10));
    r.setAttribute("y", (j*100 + 10));
    r.style.setProperty("fill-opacity", ((i*j + 1)%20)/20, null);
    g.insertBefore(r, null);
    t = doc.createElementNS(svgNS, "text");
    t.setAttribute("x", (i*100 + 50));
    t.setAttribute("y", (j*100 + 50));
    t.setAttribute("class", "diagram")
    t.textContent = [i,j];
    g.insertBefore(t, null);
  }  
}

</script>

Итак, я пытаюсь заменить 

<svg class="print landscape"...  />

статическими определениями на такие динамические определениявнутри скрипта: РЕДАКТИРОВАТЬ: я исправил некоторые определения и добавил некоторые отсутствующие.Обновлены динамические определения: 

var printLandscape = document.createElementNS(svgNS, "svg");
printLandscape.setAttribute("viewBox", " 800 500 1000 700");
printLandscape.setAttribute("orientation", "landscape");
printLandscape.setAttribute("xlink:href", "#graphic");
printLandscape.setAttribute("class", "print landscape")
g.insertBefore(printLandscape, null);

Но это (STILL) не работает.Каков будет правильный способ получить аналогичный вывод динамически?

После некоторых исследований я понимаю xlink: href не является атрибутом svg, поскольку он используется функцией «use» (?).Итак, другой элемент использования должен быть определен так, чтобы он указывал на xlink: href.Также printLanscape должна быть частью контейнера, «figure».Окончательные определения таковы: 

var doc = document;
var g = doc.getElementById("graphic");
var f = doc.getElementById("mafigure");
var svgNS = g.namespaceURI;

var printLandscape = document.createElementNS(svgNS, "svg");
var useElem = document.createElementNS(svgNS, 'use');

printLandscape.setAttributeNS(svgNS,"class", "print landscape")
printLandscape.setAttributeNS(svgNS, "viewBox", " 800 500 1000 700");
useElem.setAttributeNS(svgNS, 'xlink:href', '#graphic');
printLandscape.appendChild(useElem);
f.insertBefore(printLandscape, null);

Теперь с этими определениями у меня четвертая страница появилась в листе, но она пуста.При связывании выходных данных со страницей листов должно быть еще несколько ошибок или пропусков.

РЕДАКТИРОВАТЬ: Здесь приведен полный тестовый пример.HTML-документ со встроенными svg и javascript.Это обеспечивает 4-страничный статический лист.Я вынул четвертое статическое определение страницы и попытался реализовать динамическое определение тайла в Javascript.

Итак, теперь он правильно печатает три страницы.Четвертая страница, но пустая, с отсутствующим содержанием. 

 <html>
 <head>

 <style>
 symbol, use, svg {
   overflow: visible;
 }
 rect {
   stroke: navy;
 }

 /* Screen styles */
 figure.svg-container {
   display: block;
   overflow: scroll;
   max-width: 90vw;
   max-height: 90vh;
   border:gray solid thin;
 }

 svg.print {
   display: none;
 }
 @media print{
   figure.svg-container {
     display: inline;
     overflow: auto;
     border: none;
   }
   svg.screen {
     display: none;
   }
   svg.print {
     overflow: hidden;
     border: thin lightgray solid;
     padding: 0.5em;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     page-break-inside: avoid;
     break-inside: avoid;
   }
 }
 @media print and (orientation: landscape){
   svg.print.landscape {
     display: block;
     height: 7in;
     width: 10in;
   }
 }
 @media print and (orientation: portrait){
   svg.print.portrait {
     display: block;
     height: 9in;
     width: 7.5in;
   }
 }

 </style>

 <figure class="svg-container" id="mafigure">
   <!-- The actual graphic is a 3:2 image
        which will be wrapped in a scrolling
        container on screen. -->
   <svg class="screen" width="18in" height="12in"
        viewBox="0 0 1800 1200">
     <g id="graphic"><!-- 
       Actual graphic goes here.  I'm using a script to generate it. 
 --></g>
   </svg>
   <!-- For printing in landscape mode,
        the graphic is divided into four
        overlapping quadrants which will
        each fit on a letter/A4 page
        without scaling.  The 1000*700 viewBox
        is equivalent to 10in*7in of the
        onscreen dimensions. -->
   <svg class="print landscape" viewBox="0 0 1000 700">
     <use xlink:href="#graphic" />
   </svg>
   <svg class="print landscape" viewBox="800 0 1000 700">
     <use xlink:href="#graphic" />
   </svg>
   <svg class="print landscape" viewBox="0 500 1000 700">
     <use xlink:href="#graphic" />
   </svg>

   <!-- For printing in portrait mode,
        the graphic is scaled down slightly
        to fit on two pages.  Again,
        the content of each page will 
        overlap slightly. -->
   <svg class="print portrait" viewBox="0 0 1000 1200">
     <use xlink:href="#graphic" />
   </svg>
   <svg class="print portrait" viewBox="800 0 1000 1200">
     <use xlink:href="#graphic" />
   </svg>
 </figure>

 <script>

 var r, t;

 var doc = document;
 var g = doc.getElementById("graphic");
 var f = doc.getElementsByClassName("svg-container");
 var svgNS = g.namespaceURI;

 var printLandscape = document.createElementNS(svgNS, "svg");
 var useElem = document.createElementNS(svgNS, 'use');

 printLandscape.setAttributeNS(svgNS,"class", "print landscape")
 printLandscape.setAttributeNS(svgNS, "viewBox", " 800 500 1000 700");
 useElem.setAttributeNS(svgNS, 'xlink:href', '#graphic');
 printLandscape.appendChild(useElem);
 f[0].appendChild(printLandscape);

 for (var i=0; i<18; i++){
   for (var j=0; j<12; j++) {
     r = doc.createElementNS(svgNS, "rect");
     r.setAttribute("width", "80");
     r.setAttribute("height", "80");
     r.setAttribute("x", (i*100 + 10));
     r.setAttribute("y", (j*100 + 10));
     r.style.setProperty("fill-opacity", ((i*j + 1)%20)/20, null);
     g.insertBefore(r, null);
   }  
 }

 </script>

 <body>

 </body>

 </head>
 </html>

1 Ответ

0 голосов
/ 02 января 2019

xlink:href находится в пространстве имен xlink, а не в пространстве имен svg.На самом деле использование пространства имен устарело, и практически все браузеры понимают атрибут href без пространства имен.Просто напишите 

useElem.setAttribute('href', '#graphic');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...