打印元素不进行介质打印

[我正在处理HTML表，并使用vue.js中的html-to-paper将表打印到打印机，我正在做的是单击添加以创建新行，然后单击打印以尝试打印表但它不获取任何仅显示空白单元格的数据

Code App.vue

    <template>
  <div id="app">
    <button type="button" @click="btnOnClick">Add</button>

    <div id="printMe">
      <table class="table table-striped table-hover table-bordered mainTable" id="Table">
    <thead>
      <tr>

        <th class="itemName">Item Name</th>
        <th>Quantity</th>
        <th>Selling Price</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(tableData, k) in tableDatas" :key="k">

        <td>
          <input class="form-control" readonly v-model="tableData.itemname" />
        </td>
        <td>
          <input class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.quantity" v-on:keyup="calculateQty(tableData)" />
        </td>
        <td>
          <input class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.sellingprice" v-on:keyup="calculateSPrice(tableData)" />
        </td>
        <td>
          <input readonly class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.amount" />
        </td>
      </tr>
    </tbody>
  </table>
    </div>
    <button @click="print">Print</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableDatas: []
    }

  },
  methods: {
    btnOnClick(v) {
      this.tableDatas.push({
        itemname: "item",
        quantity: 1,
        sellingprice: 55,
        amount: 55
      });
    },
     print() {
      this.$htmlToPaper('printMe');
    }
  }
};
</script>

<style>
</style>

main.js

 import Vue from "vue";
import App from "./App.vue";
import VueHtmlToPaper from "vue-html-to-paper";

Vue.config.productionTip = false;
Vue.use(VueHtmlToPaper);

new Vue({
  render: h => h(App)
}).$mount("#app");

此处为codeandbox中的工作代码

Please check running code

根据赏金编辑

我必须使用'html-to-paper'进行处理，问题是我无法为要使用@media print打印的元素赋予样式”>

ux.engineer的答案很好，但是由于安全问题，导致浏览器出现问题，而Firefox阻止了它

例如Please check code sandbox这是我的完整代码，我试图提供样式但没有发生

html-to-print插件使用window.open，所以当我单击打印时，它不会将样式带到新页面。
这就是为什么我不采用媒体样式的原因，如何在window.open上覆盖我的样式？

我正在使用print-nb但由于安全原因]，它无法在浏览器上运行

我正在处理HTML表，并使用vue.js中的html-to-paper将表打印到打印机，我正在做的是单击添加以创建新行，然后单击打印以尝试打印...

不幸的是，您无法通过此[[mycurelabs / vue-html-to-paper-mixed包]，as stated here by the package author使用Vue的数据绑定。

但是，通过将此处使用的包切换为
Power-kxLee / vue-print-nb指令
，我创建了一种解决方法。

这是一个有效的示例：https://codesandbox.io/s/zen-sunset-2szqr

PS。有时，在相似的软件包之间进行选择可能很棘手。应该评估存储库的使用情况和活动状态，例如：首页使用，监视和开始，然后检查“打开/关闭”问题和“活动/关闭”拉取请求，然后转到“见解”以检查Pulse（1个月），然后代码频率。

在这两者之间，我会选择

vue-print-nb，因为它更受欢迎且被积极使用。也是因为相对于mixin，我更喜欢使用指令

。就另外一个答案而言，为此目的继续使用vue-html-to-paper将需要这种骇人听闻的解决方案……该指令可直接使用。
https://github.com/mycurelabs/vue-html-to-paper

https://github.com/Power-kxLee/vue-print-nb

正如其他人所提到的，这对于您使用的软件包是不可能的，因为在打印时v-model的绑定数据不存在。因此，您需要在html中静态获取此数据。 Source

解决方法是使用输入占位符：

向表格添加reference：

<tbody ref="tablebody">

这允许您在方法中选择此元素。现在更改打印方法：print() {
  const inputs = this.$refs.tablebody.getElementsByTagName("input");
  for (let input of inputs) {
    input.placeholder = input.value;
  }
  this.$htmlToPaper("printMe");
  for (let input of inputs) {
    input.placeholder = "";
  }
}
然后可以使用css设置占位符的样式，因为默认情况下它看起来是灰色的。我首先尝试以某种方式
reset
输入的值，例如input.value = input.value，但不幸的是，这没有用。Updated your code here

问题描述投票：7回答：2

2个回答

最新问题

打印元素不进行介质打印

问题描述 投票：7回答：2

2个回答

最新问题

问题描述投票：7回答：2