最近需要做一个下载vue页面为pdf格式的功能，网上方案有很多,也尝试了其他方案，最终采用的方案流程就是点击下载报告按钮，则请求后端一个接口，例如接口地址为example.cn/file/downlo…, 则返回一个pdf的文件地址即可实现下载。背后原理就是利用爬虫抓取页面然后转为pdf，存储在服务器静态资源目录，当然过程是怎样呢？接下来记录一下：

1.[前端]准备好一个vue页面

此页面就是最终需要被转为pdf后下载的页面

2.[前端]页面点击按钮，发起请求，传入参数

<el-button type="primary" @click="downloadReport">报告下载</el-button><script> import { reportDownload } from '@/api/request/analysis'// 下载的接口const url = host + `/report_download/${params.id}` // url 则是需要下载的vue页面路径
const downloadReport = () => {reportDownload({id: params.id,// 传入id和urlurl: url}).then((res:any) => {if (res) {const url = host + reswindow.open(url, '_blank') // 直接通过window.open下载 }}).catch((err) => {return err})
} </script>

3.[后端] 准备接口(report_download) 并返回pdf路径

3.1 利用谷歌的爬虫 puppeteer (这儿使用node版)

编写node爬虫脚本(就不具体介绍puppeteer了)，java后端或者其他后端，在收到前端的请求后(/download),在执行node脚本。具体可查看github github.com/puppeteer/p…

一个官网最简单的 puppeteer 转pdf脚本：

// hn.js
const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2',});await page.pdf({ path: 'hn.pdf', format: 'a4' });await browser.close();
})();

命令行执行
node hn.js

则可生成一个hn.pdf

当然项目中考虑的需求要复杂一些：比如 1.页面需要请求多个接口，而接口请求是异步的，需要耗时，那需要判断接口加载完成，也就是数据渲染了才转为PDF，所以肯能需要在 puppeteer 脚本中监听前端页面的控制台console,用来标识请求数据完成，但是一般情况下打包后的页面又删除调了所有console。需要做个一处理

const print = console;
print.log('report generate done');
// report generate done 这是前端vue页面和 puppeteer 脚本统一的标识，用来判断数据请求为完成状态 再利用爬虫功能 转为pdf

2.后端返回的pdf文件数据格式有问题，前端用window.open 则不能直接下载而是在浏览器预览，需要后端或者nginx设置header Content-Type application/octet-stream;

Nginx配置

server {listen 8888;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;location / {root F:/1/pdf;if ($request_filename ~* ^.*?\.(html|doc|pdf|zip|docx)$) {add_header Content-Disposition attachment;add_header Content-Type application/octet-stream;}}
}

3.我的index.html页面限制了html的宽高需要在预览页面重置body html app 的宽高

这次用到的代码

const puppeteer = require('puppeteer');let errorHandler = function(when, exit=true) {return function(error) {console.log(`error happened when ${when}: ${error}`);if (exit) {process.exit(1);}};
};class Reporter {constructor(timeout){this._promise = new Promise(((resolve, reject) => {this._resolve = resolve;this._reject = reject;}));this._timer = setTimeout(() => {this._reject('timeout');}, timeout);}async render(url, pdf_path, header, footer) {let browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox'], ignoreHTTPSErrors: true, headless: true}).catch(errorHandler('launch browser'));let page = await browser.newPage().catch(errorHandler('create page'));page.on('console', message => { // 页面必须在控制台输出console 才代表页面加载完成 才能开始转pdfconsole.log(message.text());if (message.text() === 'report generate done') {this._resolve();}});await page.goto(url, {timeout: 120 * 1000, waitUntil: ["domcontentloaded", "networkidle2"]}).catch(errorHandler('goto url'));await this._promise.catch(errorHandler('wait report'));clearTimeout(this._timer);await page.waitFor(3000);//新版已弃用await page.pdf({ // 生成pdfpath: pdf_path,printBackground: true,preferCSSPageSize: true,displayHeaderFooter: true,format: 'A4',margin: {top: '2cm',bottom: '2cm'},headerTemplate: `<div style="width:100%;text-align:center;font-size:10px">` + header + `</div>`,footerTemplate: `<div style="width:100%;text-align:center;font-size:10px">` + footer + `</div>`}).catch(errorHandler('generate pdf'));await browser.close().catch(errorHandler('close browser'));}
}(async () => {let reporter = new Reporter(30 * 60 * 1000);  // 10 分钟 超时await reporter.render(process.argv[2], process.argv[3], process.argv[4], process.argv[5]);
})();

vue 页面转pdf 并下载相关推荐

vue 页面生成pdf并下载 vue页面转PDF
一: 安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片生成pdf npm install jspdf --save ...
VUE页面转pdf下载
一.欢迎你们走进杭老师小学堂,今天给大家讲解一下vue页面转PDF下载,本人亲测有效哦! 随着项目体积的不断增加,我们的项目内容也逐渐越来越丰富新颖! 多了不说上需求跟代码! 1.首先我们要绑定一个按 ...
vue页面导出pdf
vue页面导出pdf 下载依赖 yarn add html2canvas // 将页面html转换成图片 yarn add jspdf // 将图片生成pdf 定义全局函数,创建htmlToPdf.j ...
Vue将当前页面转为PDF并下载
一.安装所需依赖 1.将页面html转换成图片 npm install --save html2canvas 2.将图片生成pdf npm install jspdf --save 二.在公共文件夹下 ...
vue项目中页面生成pdf并下载，vue 中页面转PDF
方法一第一步.安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片生成pdf npm install jspdf -- ...
Vue页面转PDF(已解决分辨率、页边距问题)
首先我们需要安装两个插件 npm install --save html2canvas // 页面转图片 npm install jspdf --save // 图片转pdf 然后新建一个js文件放到 ...
vue页面导出pdf文档并上传pdf格式给后台
下载依赖 yarn add html2canvas // 将页面html转换成图片 yarn add jspdf // 将图片生成pdf 定义全局函数,创建htmlToPdf.js文件 import ...
vue页面生成pdf 完整demo 及其踩得坑
bug 导出图片不显示这里是图片跨域了这里一般情况下都是用的html2canvas自带的方法 useCORS: true,(ps): 一般情况下不行看脸也有说是阿里的图片上传限制了只要去后置设置下请 ...
asp.net html2canvas,Vue 结合html2canvas和jsPDF实现html页面转pdf
结合html2canvas和jsPDF实现html页面转pdf By:授客QQ:103355122 实践环境 win10 Vue 2.9.6 axios 0.18.0 html2canvas 1.0. ...

vue 页面转pdf 并下载

1.[前端]准备好一个vue页面

2.[前端]页面点击按钮，发起请求，传入参数

3.[后端] 准备接口(report_download) 并返回pdf路径

3.1 利用谷歌的爬虫 puppeteer (这儿使用node版)

vue 页面转pdf 并下载相关推荐

最新文章

热门文章