[Vue практика] генерация страницы pdf-файл-01

Vue.js

представлять

Чтобы найти работу, мне потребовалось семь или восемь дней, чтобы заполнить мое онлайн-резюме, но я обнаружил, что никто не пришел посмотреть на эту штуку.

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

Новые визуализации возобновления загрузки:

рекламировать:
адрес гитхаба
Опыт работы от трех месяцев для поиска фронтенда

нормализовать

Прежде чем приступить к строительству, нужно подумать, что вы делаете, если у вас нет контакта со стандартизированным процессом разработки крупных компаний, вам придется составить его самостоятельно.

Если вы знаете, как стандартизировать разработку, надеюсь, вы дадите мне несколько ссылок в комментариях ниже :smile_cat:

Создать задачу

Подумай, что теперь делать, поставь соответствующий Issue и добавь соответствующие теги TODO и Feature, найди обработчик этой функции, добавь в соответствующий Канбан

Изменить канбан

Добавьте все запросы в To do и переместите те, которые должны быть обработаны немедленно, в In progress.

создать ветку

Чтобы подготовиться к рабочему процессу Github Flow, сначала создайте ветку и клонируйте ее локально.

git branch -av
# 创建本地分支并建立关联
git checkout -b feature/download_pdf origin/feature/download_pdf

развитие функции

Установить зависимости

Я выбрал идею 1, используя холст для реализации и установки связанных зависимостей.

npm i html2canvas -S
npm i jspdf -S

Функция регистрации

Эта функция будет зарегистрирована как глобальный плагин для вызова, согласно кастому, поместите его вpluginsПод папкой вводим зависимости, регистрируем набор и запускаем:

// 创建插件 pdf.js
// 引入依赖
import Vue from "vue";
import html2canvas from "html2canvas";
import jspdf from "jspdf";

const PDF = {};
// eslint-disable-next-line no-unused-vars
PDF.install = function(Vue, options) {
  Vue.prototype.$pdf = function() {
    // eslint-disable-next-line no-console
    console.log("hello pdf");
  };
};

Vue.use(PDF);

export default PDF;


// 在 main.js 中注册插件
import "./plugins/pdf";

// 在对应的地方触发方法
this.$pdf(); // hello world

Преобразовать в холст

Во-первых, вам нужно преобразовать HTML в Canvas, посмотритеhtml2canvasКак это обрабатывается:

Очень простой синтаксис, просто получите DOM.

Добавить атрибут ссылки

<share-page v-if="!shareLoading" ref="pdfPage"></share-page>

Передайте DOM в триггерное событие

<script>
export default {
  methods: {
    download() { 
      this.$pdf(this.$refs.pdfPage.$el);
    }
  } 
}
</script>

Результаты теста DOM

Vue.prototype.$pdf = function(dom) {
  // eslint-disable-next-line no-console
  console.log(dom); // 得到期望结果
};

использоватьhtml2canvas

Vue.prototype.$pdf = function(dom) {
  html2canvas(dom).then(canvas => {
    dom.appendChild(canvas);
  });
};

Перейдите на страницу для просмотра, вы можете получить идеальный холст

Распечатать в PDF

Следующим шагом будет его обработка в pdf, и посмотрите как он обрабатывается на официальном сайте:

Это кажется очень простым, предоставьте изображение (base64), а затем его можно сгенерировать. Мы знаем, что холст можно преобразовать в изображение (base64). Формат изображения, приведенный в примере,jpeg, Холст также рассматривается какjpeg:

html2canvas(dom).then(canvas => {
  const jpeg = canvas.toDataURL("image/jpeg");
  const doc = new JsPDF();

  doc.setFontSize(40);
  doc.text(35, 25, "简历");
  doc.addImage(jpeg, "JPEG", 15, 40, 180, 160);
  doc.save("简历");
});

Хорошо, давайте проверим результаты:

Резюме сформировано, но что-то не так, посмотритеДокументацияСделайте это снова:

html2canvas(dom).then(canvas => {
  const [AWidth, AHeight] = [595.28, 841.89]; // a4
  const { width: CWidth, height: CHeight } = canvas;
  const PWidth = AWidth;
  const PHeight = (AWidth / CWidth) * CHeight;
  const jpeg = canvas.toDataURL("image/jpeg", 1.0);
  const doc = new JsPDF("", "pt", "a4");

  doc.addImage(jpeg, "JPEG", 0, 0, PWidth, PHeight);
  doc.save("简历");
});

Одна операция обнаружила, что длина резюме превышаетa4высоту бумаги, затем добавьте к ней еще одну страницу, здесьСсылаться на:

Vue.prototype.$pdf = function(dom, user) {
html2canvas(dom).then(canvas => {
  const [AWidth, AHeight] = [595.28, 841.89]; // a4
  let position = 0;
  let { width: CWidth, height: CHeight } = canvas;
  const PWidth = AWidth;
  const PHeight = (AWidth / CWidth) * CHeight;
  const jpeg = canvas.toDataURL("image/jpeg", 1.0);
  const doc = new JsPDF("", "pt", "a4");

  if (CHeight < PHeight) {
    doc.addImage(jpeg, "JPEG", 0, 0, PWidth, PHeight);
  } else {
    while (CHeight > 0) {
      doc.addImage(jpeg, "JPEG", 0, position, PWidth, PHeight);
      CHeight -= PHeight;
      position -= AHeight;
      if (CHeight > 0) {
        doc.addPage();
      }
    }
  }
  doc.save(user);
});

Ну вот и все, успешные результаты показаны во введении.

Наконец, зафиксируйте, просмотрите, объедините ветки и выпустите код.

Bug

Это можно расценивать только как нежелание доделывать, а непрерывный контент будет отделяться при разбиении, что займет много времени...

Справочная документация

  1. html2canvas
  2. jspdf
  3. toDataURL
Категории