javascript - 使用 VueJS 使用 3rd 方库打印元素

Question

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

代码 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");

这里是代码框中的工作代码

Please check running code

根据赏金编辑

我必须使用“html-to-paper”来完成，问题是我无法为使用 @media print 打印的元素赋予样式

ux.engineer的答案没问题，但由于安全问题导致浏览器问题 crome 和 firefox 阻止了它

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

html-to-print插件使用 window.open 因此当我单击打印时，它不会将样式带到新页面。

这就是我为什么不采用媒体风格而陷入困境的地方，我如何在 window.open

上覆盖我的风格

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

Answer 1

不幸的是，你不能通过这个 来利用 Vue 的数据绑定(bind)。 mycurelabs/vue-html-to-paper mixin 包 , as stated here by the package author .

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

这是一个工作示例:https://codesandbox.io/s/kind-hypatia-inutd

PS。有时在相似的软件包之间进行选择可能会很棘手。应该评估 repo 的使用情况和事件​​统计信息，例如:在首页上使用、观看和开始，然后检查打开/关闭的问题和事件/关闭的拉取请求，然后转到 Insights 检查 Pulse(1 个月)，以及代码频率。

在这两者之间，我会选择 vue-print-nb 更受欢迎和更积极地使用。也因为 我更喜欢使用指令而不是 mixin .

就其他答案而言，为此目的继续使用 vue-html-to-paper 将需要那种 hacky 解决方案......因为该指令开箱即用。

https://github.com/mycurelabs/vue-html-to-paper

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