Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
582 views
in Technique[技术] by (71.8m points)

Print.js打印element表格,打印的时候怎么单独改变某一列的样式?

一、打印预览的图片如下
image.png

由于第一列的字数比较多,产生换行,怎么在打印的时候改变第一列的宽度呢?还有如果想在打印的时候改变每一列的对齐方式呢?比如第一列居左对齐,最后一列居右对齐?

二、我的Print.js配置如下,没有起到作用

  let style =
        "@media print {  .payTotalPrint .el-table tbody tr td:nth-child(1) { width:500px; } }";

      printJS({
        printable: this.printData,
        properties: this.confirmField,
        header: this.printTitle,
        type: "json",
        style: style,
        css: ["https://unpkg.com/element-ui/lib/theme-chalk/index.css"],
        scanStyles: false
      });
我的想法是直接改变第一列的td的宽度,但是好像不可以???麻烦大神路过指导一番。

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
  let style =
        "@media print {  td {font-size:12px; text-align: center; height: 35px; font-size:14px;} td:nth-child(1) {text-align: left;white-space: nowrap; } th {height:35px;}} }";
      printJS({
        printable: this.printData,
        properties: this.confirmField,
        header: this.printTitle,
        type: "json",
        style: style
      });
配置如上解决我的问题了:td:nth-child(1) {text-align: left;white-space: nowrap; }
这样就实现了第一列左对齐,并且没有折行出现。

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...