小程序下载PDF

最新推荐文章于 2024-02-07 11:06:33 发布
最新推荐文章于 2024-02-07 11:06:33 发布
阅读量511 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gx18331567741/article/details/117993201
版权

wxml

<view class="InfoBox">
<scroll-view class="scrollview" scroll-y >
  <view style="width:100%; height:auto; background:#ffffff;">
    <view style="width:95%; height:500rpx; text-align:center; margin-left:3%;">
      <view style="width: 100%; height:160rpx; padding-top:100rpx; margin-bottom:50rpx;">
        <image style="height: 160rpx; cursor: pointer;" mode="aspectFit" src="{{ApiImgPath}}success.png"></image>
      </view>
      <view style="color:#575757; font-size:36rpx; ">提交成功</view>
      <view style="font-size:30rpx; margin-top:10rpx;">
        <text style="color:#999999; ">点击</text><text style="color:#005ECC; text-decoration: underline; margin-left:15rpx;" bindtap="getFileDown">生成PDF</text>
        <text style="color:#999999; text-align:center; margin-left: 15rpx; margin-right: 15rpx;">/</text>
        <text style="color:#005ECC; text-decoration: underline; " bindtap="goBack">返回</text>
      </view>
    </view>

  </view>
  </scroll-view>
</view>

JS


const fsm = wx.getFileSystemManager();
const basepath = `${wx.env.USER_DATA_PATH}`
const app = getApp()
var guid = new GUID();
var sexadecimalDate;
var sexadecimalTime;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ApiImgPath: app.globalData.ApiPath + 'WXImgs/',
    PDFPath: '',
    HolderId: '',
    userType: ''

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;

    that.setData({
      PDFPath: options.pdfPath,
      HolderId: options.HolderId
    
    })
  
  },
  goBack: function () {
  //返回的页面

  },
  getFileDown: function () {
    var that = this;
    console.log(that.data.PDFPath);

    if(that.data.PDFPath!=""&&that.data.PDFPath!=null&&that.data.PDFPath!=undefined && that.data.PDFPath!="保存失败！")
    {
      console.log("pdf地址：" + that.data.PDFPath);
      wx.showLoading({
        title: '正在打开文件...',
        mask: true
      })
      var phonesystem;
      wx.getSystemInfo({
        success: function (res) {
          phonesystem = res.system;
          //清理缓存
          fsm.readdir({
            dirPath: basepath, /// 获取文件列表
            success(res) {
              console.log(res)
              res.files.forEach((val) => { // 遍历文件列表里的数据
                console.log(val)
                fsm.unlink({
                  filePath: basepath + '/' + val
                });
              })
            },
            fail(err) {
              console.log(err)
            },
            complete() {
              console.log('complete')
            }
          })
          if (phonesystem.indexOf('iOS') != -1) {
            that.openfileIOS(that.data.PDFPath);
          } else {
            that.openfileAndori(that.data.PDFPath);
          }
        },
        fail: function (res) {

        },
        complete: function (res) {

        }
      })

    }
    else{
    wx.request({
      url: app.globalData.ApiPath + '/api/HolderInfo/CreatePDFFile?HolderId=' + that.data.HolderId + '&token=' + app.globalData.apiToken,
      method: 'POST',
      header: {
        'content-type': 'appication/x-www-form-urlencoded'
      },
      success: function (res) {

        var result = res.data;
        that.setData({
          PDFPath: result
        })
        console.log("pdf地址：" + that.data.PDFPath);
        wx.showLoading({
          title: '正在打开文件...',
          mask: true
        })
        var phonesystem;
        wx.getSystemInfo({
          success: function (res) {
            phonesystem = res.system;
            //清理缓存
            fsm.readdir({
              dirPath: basepath, /// 获取文件列表
              success(res) {
                console.log(res)
                res.files.forEach((val) => { // 遍历文件列表里的数据
                  console.log(val)
                  fsm.unlink({
                    filePath: basepath + '/' + val
                  });
                })
              },
              fail(err) {
                console.log(err)
              },
              complete() {
                console.log('complete')
              }
            })
            if (phonesystem.indexOf('iOS') != -1) {
              that.openfileIOS(that.data.PDFPath);
            } else {
              that.openfileAndori(that.data.PDFPath);
            }
          },
          fail: function (res) {

          },
          complete: function (res) {

          }
        })
      }
    })
  }


  },
  openfileIOS(path) {
    wx.downloadFile({
      url: app.globalData.ApiPath + path,
      header: {
        "content-type": "application/pdf"
      },
      success: function (res) {
        
        var filePath = res.tempFilePath;
        console.log(filePath);
        wx.openDocument({
          filePath: filePath, //res.filePath,//
          showMenu: true,
          fileType: 'pdf',
          success: function (res) {
            wx.hideLoading({
              complete: (res) => {
                console.log('打开文档成功')
                // wx.showToast({
                //   title: '打开文档成功',
                //   icon: 'success',
                //   duration: 1000
                // })
              },
            })
          },
          fail: function (res) {
            console.log(res);
          },
          complete: function (res) {
            console.log(res);
          }
        })
      },
      fail: function (res) {
        console.log('文件下载失败');
        wx.showToast({
          title: '文件打开失败，原因：可能文件不存在或查找有误',
          icon: 'none',
          duration: 1500
        })
      },
      complete: function (res) { },
    })
  },
  openfileAndori(path) {
    wx.downloadFile({
      url: app.globalData.ApiPath + path,
      filePath: wx.env.USER_DATA_PATH + '/' + Date.parse(new Date()) + '.pdf',//'/temp.pdf',
      header: {
        "content-type": "application/pdf"
      },
      success: function (res) {
        var filepath = res.tempFilePath;
        console.log(res)
        console.log(filepath)
        wx.openDocument({
          filePath: res.filePath,
          showMenu: true,
          fileType: 'pdf',
          success: function (res) {
            //现在再分享给别人的话 就有后缀了
            //迷之bug
            wx.hideLoading({
              complete: (res) => {
                console.log('打开文档成功')
                // wx.showToast({
                //   title: '打开文档成功',
                //   icon: 'success',
                //   duration: 1000
                // })
              },
            })
          }
        })
      },
      fail: function (res) {

        console.log('文件下载失败');
        wx.showToast({
          title: '文件打开失败，原因：可能文件不存在或查找有误',
          icon: 'none',
          duration: 1500
        })
      },
      complete: function (res) { },
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 

  },


})

function GUID() {
  this.date = new Date();

  /* 判断是否初始化过，如果初始化过以下代码，则以下代码将不再执行，实际中只执行一次 */
  if (typeof this.newGUID != 'function') {

    /* 生成GUID码 */
    GUID.prototype.newGUID = function () {
      this.date = new Date();
      var guidStr = '';
      sexadecimalDate = this.hexadecimal(this.getGUIDDate(), 16);
      sexadecimalTime = this.hexadecimal(this.getGUIDTime(), 16);
      for (var i = 0; i < 9; i++) {
        guidStr += Math.floor(Math.random() * 16).toString(16);
      }
      guidStr += sexadecimalDate;
      guidStr += sexadecimalTime;
      while (guidStr.length < 32) {
        guidStr += Math.floor(Math.random() * 16).toString(16);
      }
      return this.formatGUID(guidStr);
    }

    /*
     * 功能：获取当前日期的GUID格式，即8位数的日期：19700101
     */
    GUID.prototype.getGUIDDate = function () {
      return this.date.getFullYear() + this.addZero(this.date.getMonth() + 1) +
        this.addZero(this.date.getDay());
    }

    /*
     * 功能：获取当前时间的GUID格式，即8位数的时间，包括毫秒，毫秒为2位数：12300933
     */
    GUID.prototype.getGUIDTime = function () {
      return this.addZero(this.date.getHours()) + this.addZero(this.date.getMinutes()) +
        this.addZero(this.date.getSeconds()) + this.addZero(parseInt(this.date.getMilliseconds() / 10));
    }

    /*
     * 功能: 为一位数的正整数前面添加0，如果是可以转成非NaN数字的字符串也可以实现
     */
    GUID.prototype.addZero = function (num) {
      if (Number(num).toString() != 'NaN' && num >= 0 && num < 10) {
        return '0' + Math.floor(num);
      } else {
        return num.toString();
      }
    }

    /*
     * 功能：将y进制的数值，转换为x进制的数值
     */
    GUID.prototype.hexadecimal = function (num, x, y) {
      if (y != undefined) {
        return parseInt(num.toString(), y).toString(x);
      } else {
        return parseInt(num.toString()).toString(x);
      }
    }

    /*
     * 功能：格式化32位的字符串为GUID模式的字符串
     */
    GUID.prototype.formatGUID = function (guidStr) {
      var str1 = guidStr.slice(0, 8) + '-',
        str2 = guidStr.slice(8, 12) + '-',
        str3 = guidStr.slice(12, 16) + '-',
        str4 = guidStr.slice(16, 20) + '-',
        str5 = guidStr.slice(20);

      return str1 + str2 + str3 + str4 + str5;
    }
  }
}
谁还不是一个打工人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序云开发将页面生成为pdf
08-17
用于《微信小程序云开发如何将页面生成为pdf?》这篇文章代码下载 https://blog.csdn.net/weixin_42063951/article/details/119735347
小程序中将html内容转化成wxml可以显示的内容，方便用于小程序中显示
01-04
小程序中将html内容转化成wxml可以显示的内容，方便用于小程序中显示
小程序预览PDF文件插件Pdf.js
11-20
小程序预览PDF文件插件Pdf.js，在Uniapp中使用pdf.js实现PDF预览
PDF转Image小程序
09-11
PDF转Image小程序
wxParse.zip
01-21
微信小程序将html转为wxml
小程序页面转pdf时如何实现自动分页
weixin_43191131的博客
05-21 1158
前言 最近接了个新需求，需要在前端实现页面转pdf，因为之前没接触过，所以百度了下，最终采用了wxml2canvas插件来实现页面内容转canvas转图片，最后调后端接口转pdf；做完测试后发现，因为pdf可能会存在多页，所以需要前端进行分页处理，即根据A4纸张高度分出多张图片给后端组成pdf，这下就犯难了，苦思了一天，终于想到了一个解决方案。 一、设置页面小模块标记 1.首先，初始化将页面根据纸张高度来划分几页，在onReady用wx.createSelectorQuery()根据选择器获取整个页面的高度
微信小程序云开发如何将页面生成为pdf?
weianl的博客
08-17 1万+
项目场景： 最近有小伙伴问了一个问题，那就是在微信小程序云开发如何将页面生成为pdf？但是在没有后端工程师的协助下，我们要怎么办了？ 解决方案： 于是便逛了一下午的微信社区，但很遗憾腾讯baba没有给出相应的api或决绝方案，好在有神奇的留言，找到了关键词，那就是wxml→canvas→img→pdf，wxml转化转化成canvas之后在生成img，微信官方已经给出了组件wxml-to-canvas可以解决，那么img转化成pdf要怎么办呢？可以用pdf-lib，好在看到了黄宝～这位大佬的文章，省去了很多
uniapp页面导出pdf
shuleijia的博客
12-27 5118
文章目录 前言 一、使用步骤 1.安装依赖 2.main引入 总结 前言 uniapp导出页面级的pdf。具体功能没有测试完成。已经交给后端实现，前端这边分页处文字没有截断，图片和echart导出暂时没有看，不知道行不行。。。。。个人建议还是后端实现比较好，毕竟前端还要适配不同机型和浏览器。 一、使用步骤 1.安装依赖 代码如下（示例）： npm install html2canvas npm install jspdf 2.main中引入 代码如下（示例）：
wxhtmltopdf 图片路径问题_微信小程序使用wxParse，解决图片显示路径问题
weixin_39967598的博客
12-20 187
小程序 转换富文本编辑器的方法先到github下载一个库 https://github.com/icindy/wxParse包含文件夹-wxParse--wxParse.js(必须存在)--html2json.js(必须存在)--htmlparser.js(必须存在)--showdown.js(必须存在)--wxDiscode.js(必须存在)--wxParse.wxml(必须存在)--...
关于微信原生小程序展示pdf文件的功能
2301_76272709的博客
03-27 2649
在 组件中，我们还可以通过 bindmessage 绑定一个事件处理函数，在 PDF 文件加载完成后执行一些操作，例如调整 组件的高度和宽度，以适应 PDF 文件的大小。需要注意的是，由于小程序的限制， 组件不能加载本地文件，只能加载远程服务器上的文件。在原生小程序中，如果需要展示 PDF 文件，可以使用第三方组件库或者直接使用 组件来实现。
小程序预览base64 码的pdf
10-22
小程序预览base64 码的pdf
微信小程序开发PDF版
09-28
微信小程序开发相关流程PDF版本， 微信小程序开发相关流程PDF版本， 微信小程序开发相关流程PDF版本。
小程序开发入门.pdf
05-06
小程序开发入门
微信小程序图片转pdf
01-31
微信小程序图片转pdf 可带水印，自定义水印等
微信小程序打开pdf文件流遇到的坑总结
最新发布
一个前端小白的博客
02-07 762
搞了好久才确定是referrer的问题(这个是网关的坑，一般都是第三方的referrer拦截了)如果微信api下载失败有很大可能是第三方网关的Referer 做了安全限制！小程序拿到后 将base64 写入一个临时文件 然后打开就ok了。如果返回的是这样 (如下图)
微信小程序实现pdf转word——云开发文件上传下载分享以及预览实现；基于python后台实现小程序中的pdf转word
Demonslzh的博客
03-22 1373
基于微信小程序云开发的云存储，使用python实现一个pdf转word的功能。
小程序中打开pdf文件（wx.downloadFile+wx.openDocument）
LXY_1999的博客
11-24 5860
wx.downloadFile。wx.openDocument。小程序中打开pdf文件
微信小程序实现显示pdf格式的两种方式
热门推荐
weixin_44884467的博客
12-26 1万+
本文主要介绍小程序中从后台返回显示pdf文件的两种方法 情况一：后台直接给了一个pdf地址 使用wx.downloadFile会发起get请求，下载文件资源到本地，wx.openDocument打开 // An highlighted block export const downPDF = function (obj) { wx.downloadFile({ url: obj.url,//pdf地址 例如：http://**.*****.***/ceshi/demo.pdf
微信小程序嵌套H5 实现文件下载 复制粘贴
smile2333的博客
06-01 1298
【代码】微信小程序嵌套H5 实现文件下载 复制粘贴。
微信小程序下载pdf
07-28
您可以使用微信小程序中的「文件传输助手」功能来下载 PDF 文件。请按照以下步骤操作： 1. 打开微信小程序，在搜索框中输入「文件传输助手」并点击进入。 2. 在文件传输助手的界面上方，有一个加号的图标，点击该...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值