使用第三方库通过VueJS打印元素

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

代码应用程序

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

这是codesandbox中的工作代码

请检查运行代码

根据赏金编辑

我必须用'html-to-paper'做到这一点，但问题是我无法为要打印的元素提供样式 @media print

• 答案ux.engineer很好，但由于安全问题而导致浏览器问题crome和firefox将其阻止

请检查代码沙箱，例如，这是我的完整代码，我试图提供样式但没有发生

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

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

不幸的是，您不能通过此mycurelabs / vue-html-to-paper mixin软件包利用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中静态获取此数据。资源

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

添加对表的引用：

<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设置占位符的样式，因为默认情况下它看起来是灰色的。

我首先尝试以某种方式重设输入的值，例如input.value = input.value，但不幸的是，此方法不起作用。

在这里更新了代码

根据您对这个问题的新悬赏，为坚持使用vue-html-to-paper，这是一个更新的代码示例，用于将外部样式表加载到打印窗口。

它首先从外部CDN加载Bootstrap样式，然后从公共目录加载本地CSS文件。此本地样式表只有一种样式，!important用于将输入的背景颜色替换为绿色。

如果应用了打印选项背景图形，则Windows上的Chrome会将绿色背景样式应用于输入。Windows上的Firefox具有不同的打印选项面板，该面板没有这样的设置。

但是，两者都至少部分地应用了Bootstrap样式，因此样式表已加载并正在运行。

此输入背景样式问题旨在证明浏览器在处理打印样式方面的差异，这是此问题范围之外的更广泛的主题。

PS。我不确定vue-print-nb软件包中存在哪种安全问题，但也许可以解决。您应该在他们的Github存储库中以一个最少的错误再现示例打开一个问题。

如果该vue-print-nb解决方案的问题稍后得到解决并且将我的答案更新，则将该答案添加为单独的条目。