Печать элементов с помощью VueJS с использованием сторонних библиотек

14

Я работаю над таблицей 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, но он не работает в браузере по какой-то причине безопасностиэто то, что говорит при использовании print-nb

Manish Takur
источник
manish thakur, пожалуйста, ознакомьтесь с моим новым ответом (льготный период заканчивается за 4 часа, после чего он будет
потрачен

Ответы:

9

К сожалению, вы не можете использовать привязку данных 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

ux.engineer
источник
1
Я не знаю, как эти пакеты печати сравниваются, но если все в порядке, то я думаю, что это лучшее решение, чем мой обходной путь с заполнителями.
arkuuu
@ ux.engineer, так как я нашел вашу идею очень простой и понятной, у меня есть сомнение (проблема) здесь, когда я печатаю таблицу, она печатает полную страницу с inputsвнутренней стороной, что нехорошо, я хочу удалить этот ввод и быть им Как и в обычном поле, я также могу управлять высотой, потому что я использую USB Printerкоторый не имеет a4 листов.
Маниш Такур
@manishthakur вы можете использовать глобальные стили CSS с печатью для медиа-запросов, вот рабочий пример: codesandbox.io/s/ecstatic-fire-zo2b2
ux.engineer
Хорошо, это работает, поэтому я могу определить CS, проблема здесь, предположим, что есть четыре строки, но принтер печатает полноформатный принтер, я использую USB-принтер, который пользователь для печати счетов, пожалуйста, очистите эту вещь для меня
Маниш Тхакур
@manishthakur как насчет этого: codesandbox.io/s/charming-sound-7h1bg - использование @pageCSS-правила ( developer.mozilla.org/en-US/docs/Web/CSS/@page ), как описано здесь stackoverflow.com/questions / 44064707 /…
ux.engineer
6

Как уже упоминали другие, это невозможно с пакетом, который вы используете, потому что связанные данные из 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, но, к сожалению, это не сработало.

Обновил свой код здесь

arkuuu
источник
1
Умное решение, хотя и немного хакерское. Но кажется необходимым, если вы хотите использовать этот конкретный миксин Vue для печати таких динамических значений. Однако в этот момент я бы искал альтернативные пакеты.
ux.engineer
@arkuuu Пожалуйста, проверьте мою часть редактирования, когда вы будете свободны.
Маниш Такур
@manishthakur Я прочитал это, но я понятия не имею. Возможно, вы могли бы включить поместить свои правила печати CSS в отдельный файл CSS и использовать stylesопцию vue-html-to-paper, как вы это делали с другими таблицами стилей.
arkuuu
1
Я попробовал это, но ничего не изменилось, все еще это не принимает стили
Маниш Тхакур
0

В соответствии с вашим новым вознаграждением за вопрос, для того, чтобы придерживаться использования vue-html-to-paper, вот обновленный пример кода для загрузки внешней таблицы стилей в окно печати .

Сначала он загружает стили Bootstrap из внешнего CDN, а затем из локального CSS-файла из общего каталога. Эта локальная таблица стилей имеет только один стиль для использования !importantпереопределения для ввода цвета фона на зеленый.

Chrome в Windows применяет этот стиль зеленого фона к входным данным, если применяется фоновая графика параметров печати . Firefox в Windows имеет другую панель параметров печати, которая не имеет такой настройки.

Тем не менее, оба применяют стили Bootstrap хотя бы частично, поэтому таблицы стилей загружаются и работают.

Эта проблема со стилем ввода была призвана продемонстрировать различия в том, как браузеры обрабатывают стили печати, и это более широкая тема, выходящая за рамки этого вопроса.

PS. Я не уверен, какая проблема безопасности была с vue-print-nbпакетом, но, возможно, ее можно решить. Вы должны открыть вопрос в их репозитории Github с минимальным примером воспроизведения ошибок.

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

ux.engineer
источник
Эй, я проверяю, что не принимает стили совершенно, как я пытаюсь удалить, input fields но он принимает все из них.
Маниш Такур
Непонятно, какие стили вы пытаетесь применить ... Как уже говорилось, стили печатаются не так, как в браузере, поскольку существуют ограничения. И даже те различаются между браузерами / платформами. Но таблица стилей Bootstrap применяется , не так ли? И мое переопределение, поэтому стили загружаются?
ux.engineer
Нет, я удаляю поля ввода, но он не удаляется, так как я хочу удалить поле ввода и показать его как таблицу basich с неким стилем, который я хочу придать печати, т.е. размером шрифта и выравниванием, но это не требуется, я скрываю колонна также, но в печати это берет их всех
Маниш Тхакур
Эй, вы можете догадаться, в чём проблема, так print-nbкак с ней лучше всего работать, но я не знаю, почему браузер не разрешает css
manish thakur