如何使用Vue技术实现网页内容转换为PDF的详细步骤？

本文共计1213个文字，预计阅读时间需要5分钟。

目录+需求背景+功能需求+功能实现过程+window.print()方法+使用2canvas+jspdf实现+需求背景+我平台在发货时需要打印一张发货单，这张发货单上需要显示客户的收货地址、发货地址。

目录

• 需求背景
• 功能要求
• 功能实现过程
• window.print()方法
• 使用html2canvas+jspdf实现

需求背景

我们平台在发货的时候需要打一张发货单，这张发货单上面需要显示客户的收货地址、发货地址、商品的特征信息和库存，以及订单金额等等内容。

功能要求

要求在页面中的订单详情页面点击某一个按钮，然后下载一个写好样式的PDF。

功能实现过程

window.print()方法

使用这个方法可以调起浏览器自带的打印方法，这个方法比较省事，直接写一个方法，然后绑定给按钮就完事。还能预览和选择打印的纸张大小简直yyds。但是不能高兴的太早，这样会将浏览器的整个内容都打印下来。作为发货使用肯定是不合适的，我们在网购时收到的发货单也没有带着页面菜单和页脚的，所以这个方案行不通。