O usuário preenche o formulário e clica para salvar e pode baixar diretamente o documento PDF.
Solução Geração de servidorIdéias
O Google Chrome desenvolveu seu próprio recurso Chrome Headless em 2017 e lançou marionetistas ao mesmo tempo. Pode ser entendido como um navegador que não possui interface, mas pode concluir os recursos funcionais do servidor.
Assim, podemos iniciar o navegador de marionetistas no servidor, abrir o URL de destino e usar a função de conversão fornecida pelo navegador Chrome para converter HTML em PDF.
Geração de código principal no servidorPrimeiro, você precisa instalar marionetistas. Pode haver erros na instalação do NPM. É melhor usar a imagem CNPM Taobao para instalá -la.
Digite as dependências de instalação cnpm i puppeteer -S .
Para criar um arquivo JS, você só precisa abrir o URL com o navegador de marionetistas e salvar o PDF.
// html2pdf.jSconst Pupleteer = requer ('marionetista'); (assync function () {// inicie o navegador const de serviço = aguarda marionetista.launch (); // Abra a guia Page.goto ('https://koa.bootcss.com/#context'); Em seguida, digite node html2pdf.js no console para iniciar o serviço.
Obviamente, o Module.Export também pode exportar o método do módulo de acordo com a lógica de negócios.
falha
Não é possível salvar dados dinâmicos no formulário
Como é uma página de solicitação do servidor, se a entrada do usuário não for salva no endereço de solicitação, o PDF recorte será o estado inicial em que a página não foi preenchida.
Em outras palavras, ele só pode converter páginas estáticas porque nossas necessidades têm muita entrada do usuário, então passe.
O cliente gera código principalIdéias
falha
distorção.
Podemos descobrir claramente que, como é semelhante a inserir a captura de tela em um PDF em uma página, a resolução e a configuração da página provavelmente afetarão a qualidade da imagem de saída.
Ao mesmo tempo, por ser uma captura de tela, o link da página e outras funções podem ser perdidas.
Corte de texto
Quando a tela de tela é maior que o tamanho de uma página do PDF, a saída será errada. Neste momento, precisamos determinar se a tela de tela excede o tamanho A4. Se exceder a tela, segmente a tela e insira -a em uma página diferente.
O problema vem novamente neste momento. Como está dividindo a imagem, é provável que a imagem ou o texto seja truncada da metade, porque não podemos analisar a estrutura do item interno da tela.
Código central
Nossas necessidades não têm fotos e links, portanto o problema de distorção tem pouco impacto sobre nós. Ao mesmo tempo, nosso formulário consiste em vários itens de igual comprimento duplicado, e esses itens são muito curtos e não excedem um pedaço de papel A4 (embora isso não seja rigoroso, se necessário, você pode obter a largura e a altura do elemento DOM e cortar de acordo com a altura do elemento DOM).
Por isso, pretendo dividir diretamente a tela de acordo com o item e salvar cada item em uma página do papel A4.
Várias abordagens principais precisam ser entendidas antes de começar:
html2Canvas
// DOM é o nó DOM a ser convertido html2Canvas (dom, {BackgroundColor: #ffffff, largura: largura, altura: altura, escala: 2, allowtaint: true,}). Então ((tela) => {// tela é a tela após o sucesso da conversão})JSPDF
// Crie uma instância, deixe pdf = new jspdf ('', 'pt', 'a4'); // Adicione a imagem ao arquivo pdf // O primeiro parâmetro é o formato do arquivo (base64) a ser inserido, o segundo é o formato do arquivo // o terceiro e o quarto são as coordenadas no canto superior esquerdo da figura, e as duas últimas são a largura e a altura da figura após a inserção da figura pdf.ddimage (imagem '; // Adicione uma nova página pdf.addpage () // Salvar o arquivo pdf pdf.save ()tela
// Canvas é a imagem a ser cortada // sx, Sy são as coordenadas para começar a cortar // swidth e sheight são a largura e a altura do corte // dx e dy são as coordenadas inseridas na imagem após o cronograma, o slumx, swidth, sheight é a largura e a altura da imagem após o cxt. Sheight);
/*** @Description: formulário para arquivo pdf* @return: pdf*/onSubMit () {// Este é o formulário que eu quero converter, há muitas tabelas semelhantes nele, deixe -se = this. $ refs.form; // obtenha a largura e a altura do elemento Let Width = Form.getBoundingClientRect (). Largura; deixe altura = form.getBoundingClientRect (). Hight; html2Canvas (forma, {BackgroundColor: #ffffff, largura: largura, altura: altura, escala: 2, allowTaint: true,}). Então ((canvas) => {let pdf = new jspdf ('', 'pt', a4 '); // execute o corte da imagem Atravesse a lista de tela e adicione uma imagem por página CanvasList.ForEach ((Item, Index) => {// Converte o formato da imagem em base64 Let ItemImage = Item.todataurl ('Image/JPEG', 1.0); // Reserve 10px, a largura do papel A4 é 595px a 72 a 72 a 72 a 72 a 72, a largura de A4 é 595px a 72 a 72, pdf.addimage (itemimage, 'jpeg', 10,10,575.28.575.28/item.width*item.Height); pdf.save ('test.pdf'); let chunkHeight = height/num;// The height of each slice let chunkList = [];// Storing the result canvas for(let i=0; i<height ; i+=chunkHeight){ // Initialize the position of the crop rectangle box let sx = 0,sy = i,sWidth = width,sHeight = chunkHeight,dx = 0, dy = 0; // Crie um nó de tela, deixe canvasitem = document.createElement (canvas); // inicialize o tamanho da tela canvasitem.Height = chunkHeight; canvasitem.width = width; Seja cxt = canvasitem.getContext (2D); // Coloque a imagem cortada no novo nó de tela cxt.drawimage (tela, sx, sy, swidth, sheight, dx, dy, swidth, sheight); chunklist.push (Canvasitem); } retornar Chunklist;}, Efeito finalA página após o formulário é salva
O efeito de converter para pdf
Este é o artigo sobre o cliente puro e a solução de implementação do servidor puro do HTML para PDF. Para um conteúdo mais relacionado ao HTML para PDF, procure artigos anteriores do Wulin.com ou continue a procurar os artigos relacionados abaixo. Espero que todos apoiem o Wulin.com no futuro!