Я работаю над таблицей 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
источник
inputs
внутренней стороной, что нехорошо, я хочу удалить этот ввод и быть им Как и в обычном поле, я также могу управлять высотой, потому что я используюUSB Printer
который не имеет a4 листов.@page
CSS-правила ( developer.mozilla.org/en-US/docs/Web/CSS/@page ), как описано здесь stackoverflow.com/questions / 44064707 /…Как уже упоминали другие, это невозможно с пакетом, который вы используете, потому что связанные данные из
v-model
не существует при печати. Таким образом, вы должны получить эти данные статически внутри вашего HTML. ИсточникОбходной путь должен был бы использовать входные заполнители:
Добавьте ссылку на вашу таблицу:
Это позволяет вам выбрать этот элемент в вашем методе. Теперь измените метод печати:
Затем, возможно, заменим заполнители на css, потому что по умолчанию он выглядит серым.
Сначала я попытался как-то сбросить значение ввода, например
input.value = input.value
, но, к сожалению, это не сработало.Обновил свой код здесь
источник
styles
опцию vue-html-to-paper, как вы это делали с другими таблицами стилей.В соответствии с вашим новым вознаграждением за вопрос, для того, чтобы придерживаться использования
vue-html-to-paper
, вот обновленный пример кода для загрузки внешней таблицы стилей в окно печати .Сначала он загружает стили Bootstrap из внешнего CDN, а затем из локального CSS-файла из общего каталога. Эта локальная таблица стилей имеет только один стиль для использования
!important
переопределения для ввода цвета фона на зеленый.Chrome в Windows применяет этот стиль зеленого фона к входным данным, если применяется фоновая графика параметров печати . Firefox в Windows имеет другую панель параметров печати, которая не имеет такой настройки.
Тем не менее, оба применяют стили Bootstrap хотя бы частично, поэтому таблицы стилей загружаются и работают.
Эта проблема со стилем ввода была призвана продемонстрировать различия в том, как браузеры обрабатывают стили печати, и это более широкая тема, выходящая за рамки этого вопроса.
PS. Я не уверен, какая проблема безопасности была с
vue-print-nb
пакетом, но, возможно, ее можно решить. Вы должны открыть вопрос в их репозитории Github с минимальным примером воспроизведения ошибок.Добавление этого ответа в виде отдельной записи, если
vue-print-nb
проблема с решением будет решена позже и мой ответ будет обновлен.источник
input fields
но он принимает все из них.print-nb
как с ней лучше всего работать, но я не знаю, почему браузер не разрешает css