求助求助！uniapp在app端使用webview和renderjs导出pdf时都会下载失败

分类：uni-app

uni_app

想实现一个导出pdf到手机上的需求，导入html2canvas和jspdf可以实现h5页面的导出，因为app端没有dom嘛，研究下可以使用webview或者renderjs，但是无论是使用webview还是renderjs文件都会乱码，并且下载失败,希望大佬们提供下思路，感激不尽
代码：

<template>  
  <div id="pdfDom">  
    <div>测试用的dom</div>  
    <button type="button" class="btn btn-primary" @click="test.onClick">导出PDF</button>  
  </div>  
</template>  

<script module="test" lang="renderjs">  
  import html2Canvas from "html2canvas"  
  import JsPDF from "jspdf"  
export default {  
    methods: {  
        onClick(event, ownerInstance) {  
      html2Canvas(document.querySelector("#pdfDom"), {  
        // allowTaint: true 表示允许跨越的图片  
        allowTaint: true  
      }).then(function(canvas) {  
        let imgWidth =  canvas.width  
        let imgHeight = canvas.height  
        // 生成canvas截图，1表示生成的截图质量（0-1）  
        let pageData = canvas.toDataURL("image/jpeg", 1.0)  
        // new JsPDF接收三个参数，landscape表示横向（默认不填是纵向），打印单位和纸张尺寸  
        let PDF = new JsPDF("landscape", "pt", "a4")  
        // 调用addImage方法，第一个参数表示生成的截图内容，第二个参数表示图片格式，第三个参数表示距纸张左侧的距离，第四个参数表示距纸张上方的距离，第五个参数表示生成截图的image的宽度，第六个参数表示生成截图的image的高度  
        PDF.addImage(pageData, "JPEG", 20, 20, imgWidth, imgHeight)  
        // 调用save方法生成pdf文件  
        PDF.save("test" + ".pdf")  
      })  
        }  
    }  
}  
</script>  

<style>  
#pdfDom {  
  height: 100vh;  
  background-color: pink;  
}  
</style>

2022-03-28 14:26 负责人:无分享

8 个回复

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ：543610866

可以解决

渴望网

这个怎么解决

2022-05-06 09:24

1***@qq.com - 123

楼主，解决了吗？

打工人的牛马

您解决了吗？

2022-06-15 16:44

9***@qq.com

请问大家解决这个问题了吗，困了半个多月了都，我在浏览器里运行实现了，但是app就一直下载失败！！！

百倍

请问解决了吗

zqy233 (作者)

统一回复下，没解决，实现不了，我之前需求是纯前端实现，不联网的app应用，后来解决不了就放弃这个需求了
可以联网的应用让后端实现吧，前端window.open可以下载pdf的

zqy233 (作者)

不好意思，记错了，不是window.open，是a标签触发click，下面这段代码我放手机上跑过了，是可以下载pdf到手机端的

就是直接让后端提供一个pdf地址，前端使用renderjs，不然没有a标签

<template>  
  <div><button @click="test.exportPDF">导出pdf</button></div>  
</template>  

<script module="test" lang="renderjs">  
export default {  
  methods: {  
    exportPDF() {  
      const Url = "https://files-cdn.cnblogs.com/files/ma6174/git-tutor.pdf"  
      const a = document.createElement("a")  
      a.href = Url  
      a.download = "download"  
      a.click()  
    }  
  }  
}  
</script>

这样也可以

<template>  
  <div><button @click="exportPDF">导出pdf</button></div>  
</template>  

<script>  
export default {  
  methods: {  
    exportPDF() {  
      // 下载pdf文件，返回临时路径  
      uni.downloadFile({  
        url: "https://files-cdn.cnblogs.com/files/ma6174/git-tutor.pdf", //这里为图片路径  
        success: res => {  
          console.log(res)  
          if (res.statusCode === 200) {  
            // 预览pdf文件  
            uni.openDocument({  
              filePath: res.tempFilePath,  
              success: function(file) {  
                console.log("file-success", file)  
              }  
            })  
            // 保存pdf文件至手机，一般存储路径为：手机存储/dcim/camera文件夹下  
            uni.saveImageToPhotosAlbum({  
              filePath: res.tempFilePath,  
              success: function() {  
                uni.showToast({  
                  title: "保存成功！",  
                  icon: "none"  
                })  
              },  
              fail: function() {  
                uni.showToast({  
                  title: "保存失败，请稍后重试！",  
                  icon: "none"  
                })  
              }  
            })  
          }  
        }  
      })  
    }  
  }  
}  
</script>

uni铁粉 - ctrl+cv

可以的，生成后有个base64,传到后端让他写入就是一个pdf文件了，返回一个下载地址给你就ok

vue页面生成pdf：https://ext.dcloud.net.cn/plugin?id=11223

要回复问题请先登录或注册

求助求助！uniapp在app端使用webview和renderjs导出pdf时都会下载失败

8 个回复

公告

相关问题

求助求助！uniapp在app端使用webview和renderjs导出pdf时都会下载失败

与内容相关的链接

8 个回复

公告

相关问题