Question

通过RazorEngine使用动态修改的Razor视图生成发票打印表单布局。生成的代码如下。对于人工检查和调试来说，它看起来很难看。每个项目都会重复单词top，left，width，height。

<div style='top:3.58cm;left:11.27cm;height:0.53cm;width:1.03cm;font-size:12pt;text-align:right;;z-Index:1'>Tel.</div>

如何使其更具可读性。是否可以将所有的二聚体指定在一起，例如

style='coordinates:3.58 11.27 0.53 1.03'

并将默认单位设置为cm或其他单位，以便不需要将单位添加到每个坐标？输出是从设计的报告布局生成的，很难避免绝对定位。这是ASP.NET / MONON MVC4 .NET 4 Razor MVC应用程序。

还有边框：忽略1px，不显示边框。这用于布局验证和生成器调试。如何强制出现边框或背景？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <style>
    div {
      position: absolute;
      margin: 0;
      padding: 0;
      vertical-align: top;
      font-family: "Times New Roman";
      font-size: 10pt;
      overflow: hidden;
      border: 1px;
    }
  </style>
</head>

    <body>
    <div style='top:3.58cm;left:11.27cm;height:0.53cm;width:1.03cm;font-size:12pt;text-align:right;;z-Index:1'>Tel.</div>
    <div style='top:3.61cm;left:15.58cm;height:0.53cm;width:1.72cm;font-size:12pt;;z-Index:2'>Reg.Nr</div>
    <div style='top:4.18cm;left:13.11cm;height:0.53cm;width:2.32cm;font-size:12pt;text-align:right;;z-Index:3'>Number nr</div>
    <div style='top:4.87cm;left:12.16cm;height:0.53cm;width:1.50cm;font-size:12pt;;z-Index:4'>IBAN</div>
    <div style='top:5.63cm;left:1.51cm;height:0.53cm;width:1.76cm;font-size:12pt;;z-Index:5'>Payer</div>
    <div style='top:7.58cm;left:1.32cm;height:0.53cm;width:2.70cm;font-size:12pt;text-align:right;;z-Index:6'>Address</div>
    <div style='top:8.87cm;left:1.32cm;height:0.53cm;width:2.99cm;font-size:12pt;;z-Index:7'>Duedate</div>
    <div style='top:19.92cm;left:1.16cm;height:0.42cm;width:0.93cm;;z-Index:8'>NR.</div>
    <div style='top:19.92cm;left:1.93cm;height:0.42cm;width:1.69cm;;z-Index:9'>Description</div>
    <div style='top:19.92cm;left:10.87cm;height:0.42cm;width:1.44cm;;z-Index:10'>Quantity</div>
    <div style='top:19.92cm;left:12.32cm;height:0.42cm;width:1.09cm;;z-Index:11'>Unit</div>
    <div style='top:19.92cm;left:14.40cm;height:0.42cm;width:1.12cm;;z-Index:12'>Price</div>
    <div style='top:19.92cm;left:16.95cm;height:0.42cm;width:1.60cm;;z-Index:13'> Sum</div>
    <div style='top:19.92cm;left:18.29cm;height:0.42cm;width:1.41cm;;z-Index:14'> KM%</div>
    <div style='top:21.61cm;left:0.01cm;height:0.53cm;width:1.31cm;font-size:12pt;;z-Index:15'>detail</div>
    <div style='top:23.9cm;left:12.77cm;height:0.42cm;width:2.67cm;;z-Index:16'>Käibemaksuta</div>
    <div style='top:24.45cm;left:12.79cm;height:0.42cm;width:2.13cm;;z-Index:17'>Käibemaks</div>
    <div style='top:24.95cm;left:12.82cm;height:0.42cm;width:1.82cm;;z-Index:18'>Ümardus</div>

Answer 1

使用JavaScript删除所有样式属性并向这些div添加类。循环可能会有所帮助，因为它们实际上用作表格单元格。例如，将.tel类添加到每个第5个div。然后加载自己的样式表，在此处编写规则。

$("div").removeAttr("style");
for(var i=0; i<$("div").length;i++){
    var j = i % 15;
    switch(j) {
        case 0:
            $("div")[i].addClass(".tel");
            break;
        case 1:
            //add other classes...

    }
}

我使用jQuery，因此我更容易编写示例; 您可以在浏览页面时将其作为用户脚本加载。

顺便说一句，你应该写

border: 1px solid black;

如何优化生成的文档形式html和样式

1 个答案: