서드파티 라이브러리를 사용한 VueJ 인쇄 요소

서드파티 라이브러리를 사용한 VueJ 인쇄 요소

, 그을 프린터로 인쇄하고 있습니다.html-to-paper에서 제가 있는 빈 셀 .js에서 내가 하고 있는 것은 add를 클릭해서 새 행을 만들고 나서 print를 클릭해서 표를 인쇄하려고 하는데 빈 셀만 보여주는 데이터를 받지 않는다.

코드 앱표시하다

    <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.discloss.main.discloss.

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

여기서 코드 앤 박스에 있는 작업 코드

실행 코드를 확인하십시오.

장려금에 따라 편집

html-to-paper로 할 수 .문제는 인쇄를 위해 요소를 스타일을 부여할 수 없다는 것입니다.@media print

• ★★★★★★★★★★★★★★★의 답변ux.engineer, security isssue, security isssue, security iscrome, 등의 및 firefox가 .

코드 샌드박스를 확인해 주세요.예를 들어, 여기에 제 풀코드가 있습니다.스타일링을 하려고 하고 있지만 실행되지 않습니다.

• html-to-print플러그인은 window.open을 사용하기 때문에 print를 클릭해도 스타일이 새 페이지로 이동하지 않습니다.
• 미디어 스타일에 구애받지 않는 것은 이 때문입니다.윈도의 스타일을 덮어쓰려면 어떻게 해야 합니까?open

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

유감스럽게도 패키지 작성자가 기술한 이 mycurelabs/vue-html-to-paper mixin 패키지에서는 Vue의 데이터 바인딩을 활용할 수 없습니다.

다만, 여기서 사용하는 패키지를 Power-kxLee/vue-print-nb 디렉티브로 전환함으로써 회피책을 만들었습니다.

다음으로 작업 예를 제시하겠습니다.https://codesandbox.io/s/kind-hypatia-inutd

추신. 비슷한 패키지 중 하나를 선택하는 것은 어려울 수 있습니다.레포의 사용 현황과 액티비티 통계는 다음과 같이 평가해야 합니다.첫 페이지에서 에서 사용, 감시 및 시작, Open/Closed 문제 및 Active/Closed Pull Requests를 선택한 다음 Insights로 이동하여 Pulse(1개월) 및 Code Frequency를 확인합니다.

이 두 가지 중에서 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에서 부트스트랩스타일을 로드하고 다음으로 퍼블릭디렉토리에서 로컬 CSS 파일을 로드합니다.이 로컬 스타일시트는 사용할 스타일이 하나뿐입니다.!important입력 배경색을 녹색으로 덮어씁니다.

Windows 의 Chrome 는, 인쇄 옵션의 배경 그래픽을 적용하면, 입력에 녹색 배경 스타일을 적용합니다.Windows 의 Firefox 에는, 이러한 설정이 없는 다른 인쇄 옵션 패널이 있습니다.

그러나 둘 다 적어도 부분적으로 부트스트랩 스타일을 적용하고 있기 때문에 스타일시트가 로드되어 재생되고 있습니다.

이 입력 배경 스타일의 문제는 브라우저가 인쇄 스타일을 처리하는 방법의 차이를 보여주기 위한 것으로, 이 질문의 범위를 벗어나는 광범위한 주제입니다.

추신. 어떤 종류의 보안 문제가 있었는지 모르겠습니다.vue-print-nb패키지지만 해결이 될 수도 있습니다.Github repo에서 최소한의 버그 재현 예를 사용하여 문제를 오픈해야 합니다.

이 답변이 다른 항목으로 추가되는 경우 추가vue-print-nb솔루션의 문제는 나중에 해결되고 답변은 갱신됩니다.

언급URL : https://stackoverflow.com/questions/59351520/printing-elements-with-vuejs-using-3rd-party-libraries