北京市保障房建设官方网站,网站建设柒金手指花总15,商城网站建设企业,长沙市做网站文章目录 uniapp 安卓APP H5 微信小程序实现PDF文件的预览和下载1、用到的技术及插件2、简述操作#xff1a;下载预览 3、上代码#xff1a;(主要是写后端#xff0c;前端不大熟#xff0c;我感觉写的还凑活#xff0c;不对的请指正嘻嘻)4、注意的问题 uniapp 安卓APP… 文章目录 uniapp 安卓APP H5 微信小程序实现PDF文件的预览和下载1、用到的技术及插件2、简述操作下载预览 3、上代码(主要是写后端前端不大熟我感觉写的还凑活不对的请指正嘻嘻)4、注意的问题 uniapp 安卓APP H5 微信小程序实现PDF文件的预览和下载
1、用到的技术及插件
uniapp、pdf.js4.0.379我的node是v16.15.0这个版本正好、微信小程序api2、简述操作
下载
安卓APP点击“下载”后获取手机授权可下载到手机“文件app”的最外层可访问目录下“file://storage/emulated/0/com.custom/”H5安卓点击“下载”后基本上所有的浏览器均可弹窗下载苹果推荐使用Safari浏览器其他浏览器每个效果都不一样点击“下载”后预览PDF文件点击页面中间的“分享”按钮选择“保存到文件”微信小程序安卓点击“下载”后预览PDF文件点击右上角“...”三个点选择“保存到手机”苹果点击“下载”后预览PDF文件点击右上角“...”三个点选择用“其他应用打开”再点击“保存到文件”预览
安卓APP点击“预览”后通过pdf.js实现预览H5点击“预览”后通过pdf.js实现预览微信小程序点击“预览”后通过小程序内实现预览3、上代码(主要是写后端前端不大熟我感觉写的还凑活不对的请指正嘻嘻)
提示主要是通过一个接口获取服务器端文件的路径
1、在项目static目录下新建一个pdf目录将pdf.js解压后两个目录个一个文件复制到该目录下 2、新建一个预览页面
templateviewweb-view :src url/web-view/view
/templatescriptexport default {data() {return {url : ,viewerUrl:/static/pdf/web/viewer.html?file,//刚解压的文件地址用来渲染PDF的html} },onLoad(options) {this.url this.viewerUrl options.url//将插件地址与接收的文件地址拼接起来},}
/script
以下为业务代码
// APP下载------------------------------------START----------------------------------------------------
handlePdfDownload(approvalId, attachmentName) {uni.showLoading({title: 下载中...});let data {approvalId: approvalId,downloadType: 1}let _this thisthis.$api.requestPost(/api, data, true).then(res {if (res.code res.code ! 200) {uni.hideLoading();uni.showToast({title: res.msg,icon: none,duration: 3000});return;}let fileUrl ${url_config}filePath${res.data};//条件编译若为h5端则直接赋值文件地址// #ifdef H5this.download4H5(fileUrl, attachmentName)// #endif//条件编译若为App端则需要将本地文件系统URL转换为平台绝对路径// #ifdef APP-PLUSthis.download4App(fileUrl, attachmentName)// #endif// #ifdef MP-WEIXINthis.download4WX(fileUrl, attachmentName)// #endif})
},async createDir(path) {try {// 申请本地存储读写权限return new Promise((resolve, reject) {plus.android.requestPermissions([android.permission.WRITE_EXTERNAL_STORAGE,android.permission.READ_EXTERNAL_STORAGE,android.permission.INTERNET,android.permission.ACCESS_WIFI_STATE], function (e) {if (e.deniedAlways.length 0) { //权限被永久拒绝reject(new Error(权限被永久拒绝));}if (e.deniedPresent.length 0) {//权限被临时拒绝reject(new Error(权限被临时拒绝));}if (e.granted.length 0) { //权限被允许//调用依赖获取读写手机储存权限的代码// _this.exportFile()const File plus.android.importClass(java.io.File);let file new File(path);if (!file.exists()) { // 文件夹不存在即创建if (file.mkdirs()) {resolve(true); // 成功创建文件夹} else {reject(new Error(未能创建文件夹));//resolve(false); // 未能创建文件夹}} else {resolve(true); // 文件夹已存在}}}, function (e) {});});} catch (error) {console.error(权限请求失败, error);return false; // 返回 false 表示权限请求失败}},async download4App(fileUrl, attachmentName) {try {// 获取文件夹路径const path /storage/emulated/0/com.custom;// 确保文件夹存在const createDirResult await this.createDir(path);// 检查文件夹是否创建成功if (createDirResult) {// 处理文件名let lastPointIndex attachmentName.lastIndexOf(.);let fileType attachmentName.substring(lastPointIndex 1);let endFileName attachmentName.substring(0, lastPointIndex) _ new Date().getTime() .pdf;// 开始文件下载let task plus.downloader.createDownload(fileUrl, {filename: file://storage/emulated/0/com.custom/ endFileName}, function (d, status) {if (status 200) {uni.hideLoading();uni.showToast({icon: none,title: 成功下载到【手机文件-com.custom目录- endFileName 】,duration: 3000});// d.filename是文件在保存在本地的相对路径使用下面的API可转为平台绝对路径let fileSaveUrl plus.io.convertLocalFileSystemURL(d.filename);console.log(fileSaveUrl);// plus.runtime.openFile(d.filename)//选择软件打开文件} else {uni.hideLoading();uni.showToast({icon: none,title: 下载失败,});plus.downloader.clear();}});uni.showLoading({title: 下载中...});task.start();} else {uni.hideLoading();uni.showToast({title: 权限请求失败,icon: none,});console.error(权限请求失败);}} catch (error) {uni.hideLoading();uni.showToast({title: error.message,icon: none,});console.error(下载过程中发生错误, error);}},download4H5(fileUrl, attachmentName) {uni.downloadFile({//需要预览的文件地址url: fileUrl,header: {Access-Control-Expose-Headers: Content-Disposition},success: (res) {if (res.statusCode 200) {uni.hideLoading();//下载成功得到文件临时地址console.log(下载成功, res.tempFilePath);let newUrl res.tempFilePath// 创建一个临时的 a 元素用于下载const link document.createElement(a);link.href newUrl;link.setAttribute(download, attachmentName);document.body.appendChild(link);link.click();document.body.removeChild(link);URL.revokeObjectURL(link.href);} else {uni.hideLoading();uni.showToast({title: 下载失败,icon: none,})}},fail() {uni.hideLoading();uni.showToast({title: 下载异常,icon: none,})}});},download4WX(fileUrl, attachmentName) {wx.downloadFile({url: fileUrl,success(res) {// 只要服务器有响应数据就会把响应内容写入文件并进入 success 回调业务需要自行判断是否下载到了想要的内容if (res.statusCode 200) {uni.hideLoading();wx.openDocument({filePath: res.tempFilePath,showMenu: true, //关键点success: function (res) {console.log(打开文档成功)},fail: function (err) {uni.showToast({title: 文档打开失败,icon: none,duration: 3000});}})} else {uni.hideLoading();uni.showToast({title: 文档下载失败,icon: none,});}},fail() {uni.hideLoading();uni.showToast({title: 下载异常,icon: none,})}})},// APP下载------------------------------------END----------------------------------------------------// APP预览------------------------------------START----------------------------------------------------handlePdfOpen(approvalId) {uni.showLoading({title: 正在打开文档...});let data {approvalId: approvalId,downloadType: 0}this.$api.requestPost(/api, data, true).then(res {// uni.hideLoading();if (res.code res.code ! 200) {uni.hideLoading();uni.showToast({title: res.msg,icon: none,duration: 3000});return;}this.previewPdf(${url_config}filePath${res.data})})},previewPdf(fileUrl) {//uniapp官方的下载apiuni.downloadFile({//需要预览的文件地址url: fileUrl,header: {Access-Control-Expose-Headers: Content-Disposition},success: (res) {if (res.statusCode 200) {//下载成功得到文件临时地址console.log(下载成功, res.tempFilePath);uni.hideLoading();//条件编译若为h5端则直接赋值文件地址// #ifdef H5let newUrl res.tempFilePath// uni.hideLoading();//这里新建一个vue页面跳转并预览pdf文档uni.navigateTo({url: /pages/pdfView?url newUrl,})// #endif//条件编译若为App端则需要将本地文件系统URL转换为平台绝对路径 // #ifdef APP-PLUSlet newUrl plus.io.convertLocalFileSystemURL(res.tempFilePath)// uni.hideLoading();//这里新建一个vue页面跳转并预览pdf文档uni.navigateTo({url: /pages/pdfView?url newUrl,})// #endif// #ifdef MP-WEIXINlet newUrl res.tempFilePath// 微信小程序中使用 wx.openDocumentwx.openDocument({filePath: newUrl, // 文件路径fileType: pdf, // 文件类型success: function (res) {console.log(文档打开成功);},fail: function (err) {uni.showToast({title: 文档打开失败,icon: none,duration: 3000});}});// #endif } else {uni.hideLoading();uni.showToast({title: 下载失败,icon: none,})}},fail() {uni.hideLoading();uni.showToast({title: 下载异常,icon: none,})}});},// APP预览------------------------------------END----------------------------------------------------4、注意的问题
1、H5预览出现“Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of”
nginx中加入如下配置
include mime.types;
types
{application/javascript mjs;
}2、pdf.js出现跨域问题
可以将 view.js 的以下代码注释掉 if (origin ! viewerOrigin protocol ! blob:) { throw new Error(file origin does not match viewer\s); }3、pdf.js隐藏不需要的按钮
可以加上如下样式
stylevisibility:hidden
