微信小程序中保存图片、查看pdf文件

微信小程序保存图片

如果图片是网络路径,⚠️微信官方文档中wx.saveImageToPhotosAlbum不支持

在这里插入图片描述
wx.saveImageToPhotosAlbum 微信官方文档 传送门🚪🚪🚪

怎么解决图片是网络路径呢?

微信官方文档也提供了一个 wx.downloadFile

在这里插入图片描述
在这里插入图片描述
在success回调函数中可以拿到转换后的临时文件路径tempFilePath,接下来就可以使用api来保存图片,代码如下:

function downloadFile(imgSrc = '') {
  //下载单张图片
  return new Promise((resolve, reject) => {
    wx.downloadFile({
      url: imgSrc,
      success: (res) => {
        resolve(res)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}
let imgUrl = this.data.DetailInfo.imgurl
//这里的imgUrl是接口获取返回的网络路径图片
this.downloadFile(imgUrl).then(downres=>{
    wx.saveImageToPhotosAlbum({
        filePath: downres.tempFilePath,//此时filePath已经通过api转化成为本地临时路径
        success(res) {
            wx.showToast({
                title: '保存成功',
                icon: 'none',
                duration: 2000
            })
        },
        fail(err) {
            wx.showToast({
                title: '保存失败',
                icon: 'none'
            })
        }
    })
})

查看pdf文件

let pdfurl = this.data.invoiceInfo.pdfurl
// 这里的pdfurl是接口获取返回的网络路径
const randFile = new Date().getTime() + '.pdf'   // 设置本地存储的地址
wx.downloadFile({
  url: pdfurl, 
  // 使用自定义目录(文件路径)进行下载/保存
  filePath: `${wx.env.USER_DATA_PATH}/${randFile}`,
  success(res) {
    wx.openDocument({
      // 注意 : 文件地址是 filePath
      filePath: res.filePath,
      showMenu: true,
      fileType: 'pdf',
      success() {
        console.log("打开文档成功")
      }
    })
  }
})

如有遗漏,欢迎留言,fighting!

作为AI语言模型,我不能直接生成代码或执行操作,但我可以提供一些思路和建议。 要在微信小程序点击按钮生成PDF文件,你需要使用JavaScript编写代码,利用HTML和CSS创建PDF文档,然后使用jsPDFPDFKit等JavaScript库将HTML/CSS转换为PDF格式。 以下是大致的步骤: 1. 在小程序页面添加一个按钮和一个canvas元素,用于生成PDF文件。 2. 在JavaScript代码,使用canvas的toDataURL()方法将canvas内容转换为base64编码的图像数据。 3. 使用jsPDFPDFKit等JavaScript库创建一个PDF文档对象。 4. 将canvas的图像数据添加到PDF文档。 5. 使用文本、图片、表格等方法将其他内容添加到PDF文档。 6. 使用文档对象的save()方法将PDF文档保存到本地。 下面是一个基本的示例代码: HTML代码: ``` <button id="generate-pdf">生成PDF</button> <canvas id="canvas"></canvas> ``` JavaScript代码: ```javascript // 获取canvas和按钮元素 const canvas = document.getElementById('canvas'); const button = document.getElementById('generate-pdf'); // 点击按钮时执行生成PDF文件的操作 button.addEventListener('click', () => { // 获取canvas的图像数据 const imageData = canvas.toDataURL('image/png'); // 创建PDF文档对象 const doc = new jsPDF(); // 添加canvas的图像数据到PDF文档 doc.addImage(imageData, 'PNG', 10, 10, 100, 100); // 添加其他内容到PDF文档 doc.text('这是一段文本', 20, 120); doc.save('example.pdf'); // 保存PDF文件到本地 }); ``` 请注意,这只是一个简单的示例代码,你需要根据自己的实际需求进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值