Друк елементів за допомогою VueJS за допомогою сторонніх бібліотек

Я працюю над таблицею HTML і друкую цю таблицю на принтері за допомогою html-to-papervue.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");

ось робочий код у кодах і коробці

Перевірте запущений код

Відредагуйте згідно з виграшею

мені доводиться це робити з «html-to-paper», проблема полягає в тому, що я не в змозі надати стилі мої елементи для друку за допомогою @media print

• Відповідь ux.engineerє прекрасною, але спричинення проблеми браузера crome і firefox блокують її через питання безпеки

Будь ласка, перевірте пісочну скриньку коду, наприклад, ось мій повний код, я намагаюся надати стиль, але не відбувається

• В html-to-printплагін використовує window.open тому , коли я натиснувши на друку він не приймає стиль на нову сторінку.
• Ось де я застряг, бо чому він не сприймає медіа-стиль, як я можу змінити мій стиль на window.open

Я використовував print-nb, але він не працює в браузері через певні причини безпеки

На жаль, ви не можете використовувати прив'язку даних Vue до цього пакету mycurelabs / vue-html-to-paper mixin , як зазначено тут автором пакета .

Однак я створив обхідне рішення, переключивши використаний тут пакет на директиву Power-kxLee / vue-print-nb .

Ось робочий приклад: https://codesandbox.io/s/zen-sunset-2szqr

PS. Вибір між подібними пакетами може бути складним часом. Слід оцінити статистику використання та діяльності репо, як-от: "Використовується", "Дивіться" та "Почати" на першій сторінці, потім перевірте "Відкриті / закриті проблеми" та "Активні / закриті запити на виклик", а потім перейдіть до статистики, щоб перевірити пульс (1 місяць) та Кодова частота.

Між цими двома, я б вибрав vue-print-nb для того, щоб він був більш популярним і активно використовувався. Крім того, тому що я вважаю за краще використовувати директиву над mixin .

Що стосується іншої відповіді, то для продовження використання vue-html-паперу для цієї мети знадобиться таке вигадливе рішення ... Де ця директива працює нестандартно.

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пакетом, але, можливо, це можна було б вирішити. Вам слід відкрити проблему в їхньому репортажі Github із прикладом мінімального відтворення помилок.

Додавши цю відповідь як окремий запис, якщо питання цього vue-print-nbрішення буде вирішено пізніше, а моя відповідь буде оновлена.