Печать элементов с помощью 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");

здесь рабочий код в codeandbox

Пожалуйста, проверьте работающий код

Изменить в зависимости от награды

я должен сделать это с «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. Выбор между подобными пакетами может быть сложным время от времени. Следует оценить статистику использования и активности репо, например: «Используется», «Смотреть» и «Старт» на первой странице, затем проверить «Открытые / закрытые проблемы» и «Активные / закрытые запросы на извлечение», а затем перейти к Insights для проверки Pulse (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пакетом, но, возможно, ее можно решить. Вы должны открыть вопрос в их репозитории Github с минимальным примером воспроизведения ошибок.

Добавление этого ответа в виде отдельной записи, если vue-print-nbпроблема с решением будет решена позже и мой ответ будет обновлен.