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

Question

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

代码 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>

ma​​in.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中的工作代码

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

很遗憾，您无法通过 mycurelabs/vue-html-to-paper mixin 包，as stated here by the package author 来利用 Vue 的数据绑定。

但是，我已经创建了一个解决方法，将此处使用的包切换到 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

Answer 2

正如其他人所提到的，这对于您使用的包是不可能的，因为来自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设置占位符的样式，因为默认情况下它看起来是灰色的。

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

Updated your code here

Answer 3

根据您对问题的新赏金，坚持使用vue-html-to-paper，这里是updated code example for loading externals stylesheet to the print window。

它首先从外部 CDN 加载 Bootstrap 样式，然后从公共目录加载本地 CSS 文件。这个本地样式表只有一种样式可以使用!important 覆盖将输入背景颜色变为绿色。

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

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

这个输入背景样式问题是为了展示浏览器处理打印样式的差异，这是一个超出本问题范围的更广泛的主题。

附言。我不确定vue-print-nb 包存在什么样的安全问题，但也许可以解决。您应该在他们的 Github 存储库中打开一个问题，其中包含一个最小的错误重现示例。

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