vue项目 - 实现页面打印成PDF格式

现在要实现功能为：将写好的页面。打印成PDF格式

代码实现

1.首先安装插件

// 第一个.将页面html转换成图片
npm install --save html2canvas
// 第二个.将图片生成pdf
npm install jspdf --save

2.创建文件: 在src/utils文件夹中创建文件html2pdf.js

// 导出页面为PDF格式
import html2canvas from "html2canvas"
import JSPDF from "jspdf"
export default {install (Vue, options) {Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {var element = document.getElementById("pdfCentent")html2canvas(element, {logging: false}).then(function (canvas) {var pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向var ctx = canvas.getContext("2d")var a4w = 170; var a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度var renderedHeight = 0while (renderedHeight < canvas.height) {var page = document.createElement("canvas")page.width = canvas.widthpage.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页// 用getImageData剪裁指定区域，并画到前面创建的canvas对象中page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距renderedHeight += imgHeightif (renderedHeight < canvas.height) { pdf.addPage() }// 如果后面还有内容，添加一个空页// delete page;}pdf.save(htmlTitle + currentTime)})}}
}

3.在全局main.js中引入

// 下载打印成PDF
import htmlToPdf from "../src/utils/html2pdf"
Vue.use(htmlToPdf)

4.在需要打印的页面设置打印

  <div class="cost-table">这里面是需要打印的内容</div><button type="danger" @click="ExportSavePdf(htmlTitle, nowTime)">导出PDF</button>//打印的按钮 <script>export default {data() {return {htmlTitle: "PDF名称",nowTime: ""}}
</script>

实现效果

点击按钮后则出现下载的文件，点开文件内容

vue项目 - 实现页面打印成PDF格式相关推荐

vue 项目中页面打印实现（去除页眉页脚）
vue 项目中页面打印实现参考文章: 13 Paged media 项目描述: 背景:框架vue.组件 element-ui,已有一个在用的后台管理系统需求:现需在列表页面添加按钮-----打印协 ...
MATLAB:将figure图打印成pdf格式
一个小小的需求,一个同学咨询如何把figure图打印成pdf格式,故分享一下这个方法, clcclose allclearx = 1:10;y = sin(x)+2*cos(x/2)+x/2;figu ...
html表格打印成pdf格式文件,使用html2pdf打印PDF格式文件中的数据作为PDF文件
我想从表单文章中获取一些数据并将其输出到PDF2文件中,并在同一页面上使用html2pdf.但是,当试图将表单数据发布到同一页面时,它不会打开PDF文件,这可能是因为PHP文件的其余部分将出现在if( ...
vue项目中将页面生成图片或者PDF文档
vue中页面快速导出成图片或者PDF文档实现效果图image 实现代码将页面html转换成图片或者PDF文档在需要导出的页面引入在util文件夹下创建htmlToPdf.js文件在main. ...
php中用tcpdf进行html合同页面转换成pdf格式的文档或者是直接打印
1.https://github.com/mpdf/mpdf github插件下载地址 2.dome测试 function tcpdf($str){ //引入tcpdf插件 requ ...
如何将网页打印成PDF文档？没看错，这个真可以！
当我们在浏览器上看到某篇文章时,需要保存下来,大家都会用哪种方式呢? 一般的小伙伴都是复制内容,然后粘贴到Word里,为了美观,然后再重新排版.其实这种方法并不是不可,但是如果遇到有限制的文章.那么就 ...
base64文件流转换成pdf格式下载/打印，兼容IE浏览器
需求: 后端返回的是一个base64的文件流,需要前端自行处理,把它处理成PDF格式并在浏览器中打印出来代码: getPrint(data).then(res => {const URL = ...
html虚拟打印转为pdf,Doro PDF Writer 虚拟打印机 – 可将任何格式图片/文档/文件转换成 PDF格式...
在办公领域经常要用到 PDF 格式文档,因此常常有图片.表格.Word 等各种不同格式的文档转换成 PDF 格式的需求.虽然网上有很多在线转换网站或 PDF 转换软件,不过今天推荐的是通用性更强的软件 ...
echart转换成pdf js_【jsPDF】jsPDF插件实现将html页面转换成PDF，并下载，支持分页...
1.目的:在前段是 jQuery库或者 VUE库或者两者混合库,将html 页面和数据转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图 ...

vue项目 - 实现页面打印成PDF格式

代码实现

实现效果

vue项目 - 实现页面打印成PDF格式相关推荐

最新文章

热门文章