uniapp把view标签里的内容保存为pdf下载到手机本地怎么实现

如题,试过jspdf,import就报错,npm和Git上下载都试过了,一直说缺文件, 不知道还有没有其他方法

uni-app vue 在手机APP中将页面转为图片、保存为PDF文件、打开文件
这个很详细啊

要在 Uni-app 中将 <view> 标签中的内容保存为 PDF 并下载到手机本地，可以借助第三方库 html2canvas 和 jspdf 来实现。下面是具体的步骤：

1. 安装依赖库：

   • 在项目根目录下打开终端，执行以下命令安装 html2canvas 和 jspdf：

     npm install html2canvas jspdf --save
     

2. 创建保存 PDF 的方法：

   • 在需要保存 PDF 的页面的 .vue 文件中，添加一个按钮或触发保存操作的事件。

   • 在事件处理方法中，使用 html2canvas 将 <view> 标签中的内容转换为 Canvas 元素。

     import html2canvas from 'html2canvas';
     import jsPDF from 'jspdf';
     
     export default {
       methods: {
         saveAsPDF() {
           const target = this.$refs.viewContainer; // 将 view 容器的 ref 设置为 'viewContainer'
           html2canvas(target).then(canvas => {
             const imgData = canvas.toDataURL('image/png');
             const pdf = new jsPDF();
             const imgProps = pdf.getImageProperties(imgData);
             const pdfWidth = pdf.internal.pageSize.getWidth();
             const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
             
             pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
             pdf.save('download.pdf');
           });
         }
       }
     }
     

3. 添加视图容器：

   • 在需要保存的页面中，使用 <view> 标签包裹要保存的内容，并通过 ref 属性设置一个容器的引用：

     <template>
       <view ref="viewContainer">
         <!-- 要保存为 PDF 的内容 -->
       </view>
       <button @click="saveAsPDF">保存为 PDF</button>
     </template>