[javascript] 타사 라이브러리를 사용하여 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은 괜찮지 만 브라우저 문제를 일으키는 크롬 및 파이어 폭스는 보안 문제로 인해 차단합니다.

예를 들어 코드 샌드 박스 를 확인 하십시오. 여기에는 전체 코드가 있습니다. 스타일을 지정하려고하지만 일어나지 않습니다.

• html-to-print나는 그것이 새로운 페이지에 스타일을 복용하지 않는 인쇄를 클릭하고 때 플러그인 사용은 그래서는 window.open.
• 그것이 미디어 스타일을 취하지 않는 이유에 갇혀있는 곳입니다. 창에서 내 스타일을 재정의하는 방법은 무엇입니까?

print-nb를 사용 하고 있었지만 보안상의 이유로 브라우저에서 작동하지 않습니다.

답변

<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 = "";
  }
}