サードパーティのライブラリを使用してVueJSで要素を印刷する

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

ここでcodesandboxの作業コード

実行中のコードを確認してください

バウンティごとに編集

私は「html-to-paper」でそれをしなければなりません問題は私が使用する印刷のために私の要素にスタイルを与えることができないことです @media print

• による回答ux.engineerは問題ありませんが、ブラウザの問題の原因であるcromeとfirefoxがセキュリティ問題のためにブロックしています

たとえば、コードサンドボックスを確認してください。これは私の完全なコードです。スタイリングを提供しようとしていますが、発生しません。

• html-to-print私はそれが新しいページにスタイルを取っていない印刷をクリックしていたときに、プラグインの用途はそうのwindow.open。
• それがメディアスタイルを取得していない理由として私が行き詰まっているところです。どうすればwindow.openで自分のスタイルをオーバーライドできますか？

私はprint-nbを使用していましたが、セキュリティ上の理由により、ブラウザでは機能しません

残念ながら、あなたは、このとの結合のVueのデータを活用することはできませんmycurelabs / VUE-HTMLから紙のmixinパッケージ、パッケージの作者で、ここで述べたように。

ただし、ここで使用するパッケージをPower-kxLee / vue-print-nbディレクティブに切り替えることで回避策を作成しました。

これが実際の例です：https : //codesandbox.io/s/zen-sunset-2szqr

PS。同様のパッケージを選択することは、時には注意が必要です。1つ目は、フロントページの「Used by」、「Watch」、「Start」のようなリポジトリの使用状況とアクティビティの統計を評価し、[Open / Closed Issues]と[Active / Closed Pull Requests]を確認してから、Insightsに移動してPulse（1か月）を確認します。コード頻度。

これら2つのうち、私はvue-print-nbを選択して、より人気があり、積極的に使用されます。また、私はミックスインよりもディレクティブを使用したいので。

他の回答としては、この目的のために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、入力背景色を緑に上書きするためのスタイルが1つだけあります。

Windows上のChromeは、印刷オプションの背景グラフィックスの場合、その緑の背景スタイルを入力に適用しますが適用されている適用されます。Windows上のFirefoxには、そのような設定がない、異なる印刷オプションパネルがあります。

しかし、どちらも少なくとも部分的にBootstrapスタイルを適用しているため、スタイルシートがロードされて機能します。

この入力背景スタイルの問題は、ブラウザが印刷スタイルを処理する方法の違いを示すためのものであり、この質問の範囲外のより広いトピックです。

PS。どんなセキュリティ問題があったのかよくわかりませんvue-print-nbパッケージにが、おそらく解決できるでしょう。最小限のバグ再現の例を使用して、Githubリポジトリで問題を開く必要があります。

そのvue-print-nbソリューションの問題が後で解決され、私の回答が更新される場合は、この回答を別のエントリとして追加します。