打印div和svgs会改变其对齐方式（JointJs）
问题描述 投票：0回答：1
所以我在打印Web应用程序的选定div时遇到了一个小问题，其中包含div和svg-Elements。
我正在为图构建应用程序使用JointJs，其中我使用了底层的jointjs模型，这是一个SVG，其中包含用于定位和连接的图形，并添加了HtmlView来设置元素样式。这两个“层”位于应用程序内部，其中div的位置为“ position：absolute; top：..; left：...”，而JointJs模型的位置为“ transform：translate（..，..）”。
到目前为止，在移动，缩放，调整大小等过程中，所有内容都能完美对齐。
现在，当我选择要打印的包含我的图形的div时，这些元素现在会错位8px。
到目前为止，我的理论是这样的：打印页面时，页面在页面周围有一个小边框，因为打印机不会直接在纸的边缘打印。 svg会尊重此“保证金”，而divs则不会。它们的起源似乎在页面的左上角。
对于打印，我只是这样做：
function print() {
const mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');
mywindow.document.write('<html><head><title>DIV Contents</title>');
mywindow.document.write('</head><body >');
for(let i=0; i < document.getElementsByClassName('paperContainer').length; i++) {
const htmlElement = document.getElementsByClassName('paperContainer').item(i).outerHTML;
mywindow.document.write(htmlElement);
}
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
}<div _ngcontent-muf-c11="" class="paperContainer" ng-reflect-ng-class="[object Object]">
<div _ngcontent-muf-c11="" id="paper0" class="joint-paper joint-theme-default"
style="background-color: white; width: 29cm; height: 20.5cm;">
<div class="Server"
style="position: absolute; width: 64px; height: 64px; left: 439px; top: 243px; transform: rotate(0deg); pointer-events: none; user-select: none; padding: 5px; box-sizing: border-box; z-index: 10;">
<div class="iconPlaceholder">
<svg viewBox="0 0 640 512" class="iconSize" width="64" height="64">
<g>
<path class="icon"
d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z">
</path>
</g>
</svg>
</div>
<button class="delete"
style="display: none; color: white; border: none; background-color: rgb(192, 57, 43); border-radius: 20px; width: 15px; height: 15px; font-size: 10px; position: absolute; top: 2px; right: 2px; padding: 0px; margin: 0px; font-weight: bold; cursor: pointer; pointer-events: auto;">
✖
</button>
</div>
<div class="Server"
style="position: absolute; width: 64px; height: 64px; left: 255px; top: 241px; transform: rotate(0deg); pointer-events: none; user-select: none; padding: 5px; box-sizing: border-box; z-index: 10;">
<div class="iconPlaceholder">
<svg viewBox="0 0 640 512" class="iconSize" width="64" height="64">
<g>
<path class="icon"
d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z">
</path>
</g>
</svg>
</div>
<button class="delete"
style="display: none; color: white; border: none; background-color: rgb(192, 57, 43); border-radius: 20px; width: 15px; height: 15px; font-size: 10px; position: absolute; top: 2px; right: 2px; padding: 0px; margin: 0px; font-weight: bold; cursor: pointer; pointer-events: auto;">
✖
</button>
</div>
<div class="Zone"
style="position: absolute; width: 338px; height: 208px; left: 203px; top: 174px; transform: rotate(0deg); pointer-events: none; user-select: none; padding: 5px; box-sizing: border-box; z-index: 5;">
<button class="delete"
style="display: none; color: white; border: none; background-color: rgb(192, 57, 43); border-radius: 20px; width: 15px; height: 15px; font-size: 10px; position: absolute; top: 2px; right: 2px; padding: 0px; margin: 0px; font-weight: bold; cursor: pointer; pointer-events: auto;">
✖
</button>
<button class="resize"
style="display: none; color: white; border: none; background-color: rgb(119, 119, 119); border-radius: 20px; width: 15px; height: 15px; font-size: 15px; position: absolute; bottom: 2px; right: 2px; padding: 0px; margin: 0px; font-weight: bold; cursor: pointer; pointer-events: auto;">
⤡
</button>
<label
style="font-size: 16px; position: absolute; top: 5px; left: 5px; outline: rgb(187, 187, 187) solid 1px; padding: 2px 4px;">Standard
Sicherheit</label>
</div>
<div class="joint-paper-background" joint-selector="background"></div>
<div class="joint-paper-grid" joint-selector="grid"></div>
<svg width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" joint-selector="svg" id="v-2">
<defs joint-selector="defs">
<marker id="v-21801458145" orient="auto" overflow="visible" markerUnits="userSpaceOnUse">
<path id="v-31" stroke="#333333" fill="#333333" transform="rotate(180)" d="M 10 -5 0 0 10 5 z">
</path>
</marker>
</defs>
<g joint-selector="layers" transform="matrix(1,0,0,1,0,0)" class="joint-layers">
<g joint-selector="cells" class="joint-cells-layer joint-viewport">
<g model-id="a338dc1d-3d35-4a3c-97eb-9fbed0182d07" data-type="html.Element" id="j_3"
class="joint-cell joint-type-html joint-type-html-element joint-element joint-theme-default"
fill="#ffffff" stroke="none" transform="translate(203,174)">
<g class="rotatable" id="v-16">
<g class="scalable" transform="scale(3.38,3.466666666666667)">
<rect id="v-17" stroke="none" fill-opacity="1" fill="#cccccc" width="100" height="60">
</rect>
</g>
<text id="v-18" font-size="14" xml:space="preserve" display="none" y="0.8em" fill="#000000"
text-anchor="middle" font-family="Arial, helvetica, sans-serif"
transform="matrix(1,0,0,1,169,104)">
<tspan dy="0" style="fill-opacity: 0; stroke-opacity: 0;" class="v-line v-empty-line">-
</tspan>
</text>
</g>
</g>
<g model-id="3d03955b-d2f3-4a8a-bcc0-5b620a5f0b3f" data-type="html.Element" id="j_4"
class="joint-cell joint-type-html joint-type-html-element joint-element joint-theme-default"
fill="#ffffff" stroke="none" transform="translate(255,241)">
<g class="rotatable" id="v-19">
<g class="scalable" transform="scale(0.64,1.0666666666666667)">
<rect id="v-20" stroke="none" fill-opacity="0" fill="#ffffff" width="100" height="60">
</rect>
</g>
<text id="v-21" font-size="14" xml:space="preserve" display="none" y="0.8em" fill="#000000"
text-anchor="middle" font-family="Arial, helvetica, sans-serif"
transform="matrix(1,0,0,1,32,32)">
<tspan dy="0" style="fill-opacity: 0; stroke-opacity: 0;" class="v-line v-empty-line">-
</tspan>
</text>
</g>
</g>
<g model-id="b95097d5-a0ac-4bc5-b8e4-c84022496ec0" data-type="html.Element" id="j_5"
class="joint-cell joint-type-html joint-type-html-element joint-element joint-theme-default"
fill="#ffffff" stroke="none" transform="translate(439,243)">
<g class="rotatable" id="v-22">
<g class="scalable" transform="scale(0.64,1.0666666666666667)">
<rect id="v-23" stroke="none" fill-opacity="0" fill="#ffffff" width="100" height="60">
</rect>
</g>
<text id="v-24" font-size="14" xml:space="preserve" display="none" y="0.8em" fill="#000000"
text-anchor="middle" font-family="Arial, helvetica, sans-serif"
transform="matrix(1,0,0,1,32,32)">
<tspan dy="0" style="fill-opacity: 0; stroke-opacity: 0;" class="v-line v-empty-line">-
</tspan>
</text>
</g>
</g>
<g model-id="d727a4a8-b968-42b5-a2c0-f4a63a9f533d" data-type="standard.Link" id="j_6"
class="joint-cell joint-type-standard joint-type-standard-link joint-link joint-theme-default">
<path fill="none" cursor="pointer" stroke="transparent" stroke-linecap="round"
joint-selector="wrapper" id="v-30" stroke-width="10" stroke-linejoin="round"
d="M 319 273 L 379 273 L 379 275 L 439 275"></path>
<path fill="none" pointer-events="none" joint-selector="line" id="v-29" stroke="#333333"
stroke-width="2" stroke-linejoin="round" d="M 319 273 L 379 273 L 379 275 L 439 275"
marker-end="url(#v-21801458145)"></path>
<g id="v-25" class="labels">
<g id="v-26" class="label" label-idx="0" cursor="default"
transform="matrix(1,0,0,1,379,274)">
<rect joint-selector="rect" id="v-28" fill="#ffffff" rx="3" ry="3" width="35.078125"
height="31.015625" transform="matrix(1,0,0,1,-17.5,-15.5)"></rect>
<text joint-selector="text" id="v-27" font-size="14" xml:space="preserve" y="0.8em"
fill="#000000" text-anchor="middle" pointer-events="none"
transform="matrix(1,0,0,1,0,-13.7)">
<tspan dy="0" class="v-line">TCP </tspan>
<tspan dy="1em" x="0" class="v-line"> 6543</tspan>
</text>
</g>
</g>
</g>
</g>
<g joint-selector="tools" class="joint-tools-layer"></g>
</g>
</svg>
</div>
</div>我试图将div的位置从px更改为pt（就像它对打印内容的建议一样，但是并没有改变任何东西。
[我担心，我必须在打印前立即将每个div上下移动，但是我觉得必须有一个更好的选择来解决这个问题。
因为这是一个Angular应用程序，所以我不知道所创建的html是否对您有帮助，但是无论如何我都会粘贴所选的div进行打印。
任何想法都很珍贵。如果您需要更多信息，请告诉我：）
1个回答
0
投票
投票
已解决！ （某种）
我按如下方式更改了print（）函数：
print() {
const mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');
mywindow.document.write('<div style="position: absolute; top: 5pt; left: 5pt;">')
for(let i=0; i < document.getElementsByClassName('paperContainer').length; i++) {
const htmlElement = document.getElementsByClassName('paperContainer').item(i).outerHTML;
mywindow.document.write(htmlElement);
}
mywindow.document.write('</div>')
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
}
因此，我将内容包装在具有绝对位置的div中，并且本身将其上下左右移动了5pt。这仅影响div元素，而不影响svg。因此，现在所有这些都再次得到了认可。
这不是完美的，可能会折断其他纸张格式，但就我而言，它可以解决问题。
最新问题
- 房间数据库：WorkoutDao 中使用 Kotlin 协程进行查询和插入时出现游标转换错误 - 需要帮助解决
- 无法使用存储访问框架 (SAF) 设置文档导航器的初始位置
- 如何在 NextJS 应用程序中创建动态座位布局
- 如何在 Unity 中将纹理添加到自定义着色器的实例属性？ （URP）
- C 程序使用 switch case 查找两个数字之间的最大值
- 如何在 Entity Framework Core 8.0.8 中更新父类和 [Owned] 属性类类型的数据库
- SQL 查询遇到问题
- 最大文本长度 KivyMD
- IntelliJ 显示每行执行时间
- 无法在 mac sequoia 15.0 和 VS Code 上使用 clang 编译 c++ hello world
- Angular ng 在应用程序文件夹之外构建转译 TypeScript？
- 为什么yolov8在C++中开始训练、验证和测试时自动启动并行进程
- 避免重复电源查询
- 接口是指针吗？
- Angular - 组件使用 BehaviourSubject 进行重复的 api 'GET' 请求
- 如何启用数据API？
- Java 中的常量函数参数？
- “where column in (select id from table)”和“where column = (select id from table)”在性能方面有什么区别？
- word文档中嵌入的excel文件不保留文件名
- refs/original/ 是做什么的？
© www.soinside.com 2019 - 2024. All rights reserved.