การพิมพ์องค์ประกอบด้วย VueJS โดยใช้ห้องสมุดบุคคลที่สาม

ฉันกำลังทำงานกับตาราง HTML และพิมพ์ตารางนั้นไปยังเครื่องพิมพ์ที่ใช้html-to-paperใน vue.js สิ่งที่ฉันกำลังทำอยู่คือการคลิกเพิ่มการสร้างแถวใหม่จากนั้นเมื่อคลิกการพิมพ์ฉันกำลังพยายามพิมพ์ตาราง แต่ไม่ได้ถ่าย ข้อมูลใด ๆ แสดงเซลล์ว่างเท่านั้น

รหัสแอป

    <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 ต่อกระดาษ' ปัญหาคือฉันไม่สามารถให้สไตล์กับองค์ประกอบของฉันสำหรับการพิมพ์โดยใช้ @media print

• คำตอบux.engineerนั้นใช้ได้ แต่ก่อให้เกิดปัญหาเบราว์เซอร์ crome และ firefox กำลังบล็อกมันเนื่องจากการรักษาความปลอดภัยออก

โปรดตรวจสอบรหัสแซนด์บ็อกซ์ตัวอย่างเช่นที่นี่คือรหัสเต็มของฉันฉันพยายามให้สไตล์ แต่ไม่เกิดขึ้น

• html-to-printใช้ปลั๊กอิน window.open ดังนั้นเมื่อฉันคลิกที่พิมพ์มันไม่ได้นำรูปแบบไปยังหน้าใหม่
• นั่นคือที่ที่ฉันติดอยู่เพราะทำไมมันถึงไม่ใช้สไตล์สื่อฉันจะลบล้างสไตล์ของฉันใน window.open ได้อย่างไร

ฉันใช้ print-nbแต่มันไม่ทำงานบนเบราว์เซอร์เนื่องจากเหตุผลด้านความปลอดภัย

แต่น่าเสียดายที่คุณไม่สามารถใช้ประโยชน์จากข้อมูลวูผูกพันกับเรื่องนี้แพคเกจ mixin mycurelabs / vue-HTML เพื่อกระดาษ , ตามที่ระบุไว้ที่นี่โดยผู้เขียนแพคเกจ

แต่ผมได้สร้างวิธีแก้ปัญหาโดยการเปลี่ยนแพคเกจที่ใช้ที่นี่เพื่อPower-kxLee / vue พิมพ์-NB สั่ง

นี่คือตัวอย่างการทำงาน: https://codesandbox.io/s/zen-sunset-2szqr

PS การเลือกระหว่างแพ็คเกจที่คล้ายกันอาจมีความยุ่งยากในบางครั้ง หนึ่งควรประเมินการใช้งาน repo และสถิติกิจกรรมเช่น: ใช้โดย, เฝ้าดู, และเริ่มต้นที่หน้าจากนั้นตรวจสอบปัญหาการเปิด / ปิดและคำขอดึง / ปิดใช้งาน / ปิดแล้วไปที่ข้อมูลเชิงลึกเพื่อตรวจสอบชีพจร (1 เดือน) และ รหัสความถี่

ระหว่างสองสิ่งนี้ฉันจะเลือก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ที่นี่เป็นตัวอย่างรหัสการปรับปรุงสำหรับการโหลดภายนอกสไตล์ชีตไปที่หน้าต่างพิมพ์

ก่อนอื่นจะโหลดลักษณะ Bootstrap จาก CDN ภายนอกจากนั้นเป็นไฟล์ CSS ท้องถิ่นจากไดเรกทอรีสาธารณะ สไตล์ชีทในท้องถิ่นนี้มีเพียงหนึ่งสไตล์สำหรับใช้!importantแทนที่สำหรับสีพื้นหลังอินพุตเป็นสีเขียว

Chrome บน Windows ใช้สไตล์พื้นหลังสีเขียวนั้นกับอินพุตหากใช้กราฟิกพื้นหลังตัวเลือกการพิมพ์ Firefox บน Windows มีแผงตัวเลือกการพิมพ์ที่แตกต่างกันซึ่งไม่มีการตั้งค่าดังกล่าว

แต่ทั้งคู่ก็ใช้สไตล์ Bootstrap อย่างน้อยบางส่วนดังนั้นสไตล์ชีตจึงถูกโหลดและเล่นอยู่

ปัญหาลักษณะพื้นหลังอินพุตนี้แสดงให้เห็นถึงความแตกต่างในวิธีที่เบราว์เซอร์จัดการกับสไตล์การพิมพ์และเป็นหัวข้อที่กว้างกว่าขอบเขตของคำถามนี้

PS ฉันไม่แน่ใจว่ามีปัญหาด้านความปลอดภัยเกี่ยวกับvue-print-nbแพคเกจใดบ้าง แต่อาจแก้ไขได้ คุณควรเปิดปัญหาใน repo Github ด้วยตัวอย่างการทำซ้ำข้อบกพร่องที่น้อยที่สุด

การเพิ่มคำตอบนี้เป็นรายการแยกต่างหากหากvue-print-nbปัญหาของโซลูชันนั้นได้รับการแก้ไขในภายหลังและคำตอบของฉันจะได้รับการอัปเดต