使用vue 将网页完美的导出为pdf并下载

可以使用jsPDF和html2canvas两个库来实现将网页导出为PDF并下载的功能。

首先，在Vue项目中安装这两个库：

npm install jspdf html2canvas --save

然后，在需要导出为PDF的组件中，引入这两个库：

import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

接下来，在导出按钮的点击事件中，添加以下代码：

exportPDF() {
  html2canvas(document.querySelector('#pdf-content')).then(canvas => {
    const pdf = new jsPDF('p', 'mm', 'a4')
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298)
    pdf.save('download.pdf')
  })
}

这里的`#pdf-content`是需要导出为PDF的组件的ID，可以根据实际情况进行修改。`pdf.save('download.pdf')`可以设置导出的PDF文件名。

最后，在组件中添加导出按钮，并绑定点击事件：

<template>
  <div>
    <div id="pdf-content">
      <!-- 需要导出为PDF的内容 -->
    </div>
    <button @click="exportPDF">导出PDF</button>
  </div>
</template>

这样，点击导出按钮时，就会将组件中的内容导出为PDF并自动下载。