web-dev-qa-db-ja.com

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

私は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>

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を使用していましたが、セキュリティ上の理由により、ブラウザでは機能しません this is what is says while using print-nb

javascriptcssvue.jsprintingvuejs2
14
manish thakur

残念ながら、このmycurelabs/vue-html-to-paper mixinパッケージ、 を使用してVueのデータバインディングを利用することはできません。パッケージの作者 。

ただし、ここで使用するパッケージを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

9
ux.engineer

他の人が述べたように、これは、使用するパッケージでは不可能です。印刷時にv-modelからのバインドされたデータが存在しないためです。したがって、このデータをHTML内で静的に取得する必要があります。 ソース

回避策は、入力プレースホルダーを使用することです：

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のように、入力の値を何らかの方法でresetしようとしましたが、残念ながら機能しませんでした。

ここでコードを更新

6
arkuuu

質問に対する新たな報奨金に従って、vue-html-to-paperの使用に固執するために、ここに 外部スタイルシートを印刷ウィンドウにロードするための更新されたコード例 を示します。

最初に、外部CDNからBootstrapスタイルをロードし、次にパブリックディレクトリからローカルCSSファイルをロードします。このローカルスタイルシートには、入力背景色を緑に!importantオーバーライドを使用するためのスタイルが1つだけあります。

Windows上のChromeでは、印刷オプションbackground graphicsが適用されている場合、その緑の背景スタイルが入力に適用されます。 Windows上のFirefoxには別の印刷オプションパネルがありますが、そのような設定はありません。

まだ両方にBootstrapスタイルが適用されているため、スタイルシートが読み込まれ、動作します。

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

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

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

0
ux.engineer