郑州大旗网站制作公司,专业的移动网站建设,网站开发业内人士,郴州网络工程职业学校需求
使用Vue开发h5#xff0c;嵌套到Android和IOS的Webview里#xff0c;需要实现pdf预览和保存功能#xff0c;预览pdf的功能#xff0c;我这边使用了三个库#xff0c;pdf5#xff0c;pdf.js#xff0c;vue.pdf#xff0c;现在把这三个库在app端的坑分享一下。先说…需求
使用Vue开发h5嵌套到Android和IOS的Webview里需要实现pdf预览和保存功能预览pdf的功能我这边使用了三个库pdf5pdf.jsvue.pdf现在把这三个库在app端的坑分享一下。先说预览的保存的实现等会再说
前置条件
用第三方库访问pdf很可能会出现跨域的问题这个需要后端来处理一下。具体怎么处理自行百度。我用pdf.js访问的时候尝试过前端解决跨域可以参考一下
pdf5实现
先说pdf这个集成和实现都很简单但是有个问题页数多的话一直现在加载中并不能加载成功始终在第一页这个问题暂时没解决有大佬知道的话可以指点一下
templatediv styleheight: 100vhdiv idpdf-content styleheight: 60vh/divdiv classdiv-task-buttondiv classtasks-button clickdownloadPdf保存/div/div/div/div
/template// import Pdfh5 from pdfh5;
// import pdfh5/css/pdfh5.css;
import pdf from vue-pdf;
export default {name: Pdfh5,data() {return {pdfh5: null,title: 通知单,pdfUrl: , // 如果引入本地pdf文件需要将pdf放在public文件夹下引用时使用绝对路径/表示public文件夹};},mounted() {try {let orderItem JSON.parse(this.$route.query.item);this.title orderItem.title;this.pdfUrl orderItem.pdfUrl ;} catch (e) {console.log(e)}this.initPdf();},methods: {initPdf() {this.pdfh5 new Pdfh5(#pdf-content, {pdfurl: this.pdfUrl, // pdf 地址请求的地址需要为线上的地址测试的本地的地址是不可以的lazy: true, // 是否懒加载withCredentials: true,renderType: svg,maxZoom: 3, //手势缩放最大倍数 默认3scrollEnable: true, //是否允许pdf滚动zoomEnable: true, //是否允许pdf手势缩放});},downloadPdf() {console.log(开始下载);let body {url: this.pdfUrl,};if (config.isAndroid window.hesAndroidNative) {window.hesAndroidNative.openSystemBrowser(JSON.stringify(body));} else if (config.isIos window.webkit) {window.webkit.messageHandlers.openSystemBrowser.postMessage(JSON.stringify(body));} else {}},},
};
/script
pdf.js 实现
使用pdf.js实现需要下载文件包具体实现参考 vue开发h5页面如何使用pdf.js实现预览pdf
templatediv styleheight: 100vhiframe idpdfViewer title width100% height60%/iframediv classdiv-task-buttondiv classtasks-button clickdownloadPdf保存/div/div/div/div
/template
scriptexport default {name: Pdfh5,data() {return {pdfh5: null,title: 通知单,numPages: undefined,// 可引入网络文件或者本地文件pdfUrl: , // 如果引入本地pdf文件需要将pdf放在public文件夹下引用时使用绝对路径/表示public文件夹};},mounted() {try {let orderItem JSON.parse(this.$route.query.item);this.title orderItem.title;this.pdfUrl orderItem.pdfUrl;} catch (e) {console.log(e)}const pdfLink /web/viewer.html?file encodeURIComponent( this.pdfUrl);document.getElementById(pdfViewer).src pdfLink;// fetch(this.pdfUrl, {// method: get,// mode: no-cors, //防止跨域// responseType: blob,// })// .then((response) response.blob())// .then((blob) {// const blobUrl URL.createObjectURL(blob);// console.log(blobUrl, blobUrl);// const pdfLink /web/viewer.html?file encodeURIComponent(blobUrl);// document.getElementById(pdfViewer).src pdfLink;// });//this.initPdf();},methods: {},downloadPdf() {console.log(开始下载);let body {url: this.pdfUrl,};if (config.isAndroid window.hesAndroidNative) {window.hesAndroidNative.openSystemBrowser(JSON.stringify(body));} else if (config.isIos window.webkit) {window.webkit.messageHandlers.openSystemBrowser.postMessage(JSON.stringify(body));} else {}// this.pdfh5.download(体检通知单);},},
};
/script刚开始呢也是遇到了跨域我想着看看前端能不能处理先把url转成blob然后在用pdf.js来加载blob就是注释掉的那几行代码 fetch(this.pdfUrl, {method: get,mode: no-cors, //防止跨域responseType: blob,}).then((response) response.blob()).then((blob) {const blobUrl URL.createObjectURL(blob);console.log(blobUrl, blobUrl);const pdfLink /web/viewer.html?file encodeURIComponent(blobUrl);document.getElementById(pdfViewer).src pdfLink;});这么说吧可以实现但是又出现了另一个问题因为使用iframeRefused to display http://192.xxxxxx/ in a frame because it set X-Frame-Options to deny.这个又需要后台配置 参考文章 VUE使用 iframe 嵌入网页浏览器报错 x-frame-options deny
这是通义千问上给出的跨域答案可以作为参考 PDF.js在加载和渲染远程PDF文件时如果文件所在的服务器与应用所在服务器不是同一个源即存在跨域问题会受到浏览器同源策略的限制从而导致无法正确加载和显示PDF文件。以下是几种处理PDF.js跨域问题的方法 服务器端代理 在后端服务中处理跨域问题比如在Django等后端框架中你可以创建一个API接口这个接口负责从远程服务器获取PDF文件然后将文件内容作为流返回给前端绕过浏览器的同源策略。 StreamingHttpResponse import requests def serve_pdf(request): # 获取远程PDF文件 response requests.get(‘http://remote-server.com/path/to/file.pdf’, streamTrue) # 设置响应头允许跨域等 response_headers response.headers response_headers[‘Access-Control-Allow-Origin’] ‘*’ return StreamingHttpResponse(response.iter_content(chunk_size1024), content_typeresponse.headers[‘Content-Type’], headersresponse_headers) CORS配置 如果你控制远程服务器可以在服务器上配置CORSCross-Origin Resource Sharing。例如在Nginx或Apache服务器上可以通过添加响应头Access-Control-Allow-Origin来允许特定源或者所有源访问资源。 if ($request_method OPTIONS) {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods GET;add_header Access-Control-Allow-Headers Range;add_header Access-Control-Max-Age 1728000;add_header Content-Type text/plain charsetUTF-8;add_header Content-Length 0;return 204;}if ($request_method GET) {add_header Access-Control-Allow-Origin *;}try_files $uri $uri/ 404; } 修改PDF.js自身行为 PDF.js可以通过修改其内部的网络请求模块来发送跨域请求并且处理相关的预检请求OPTIONS以符合CORS规范。有时可能需要移除或修改代码中对跨域错误处理的部分但这并不是推荐做法因为这可能导致安全风险。 Blob URL或FileReader API 可以在客户端JavaScript中利用fetch或其他手段获取远程PDF文件然后创建一个Blob对象再将其转换为Blob URL之后传递给PDF.js viewer。.then(response response.blob())
.then(blob {
const blobUrl URL.createObjectURL(blob);
const pdfLink /web/viewer.html?file encodeURIComponent(blobUrl);
document.getElementById(pdfViewer).src pdfLink;
}); 根据具体场景选择合适的解决方案优先推荐配置服务器端的CORS策略其次是通过后端代理转发请求。同时请确保遵循相关安全原则避免因放宽跨域策略而引入的安全隐患。 使用vue-pdf实现
最好使用 cnpm install vue-pdf4.3.0 安装防止报错这个实现也简单
templatediv styleheight: 100vh!-- div idpdf-content styleheight: 60vh/div --!-- iframe idpdfViewer title width100% height60%/iframe --div classpdf_wrapdiv classpdf_listpdfv-fori in numPages:keyi:srcpdfUrl:pageistyledisplay: inline-block; width: 100%/pdf/divdiv classdiv-task-buttondiv classtasks-button clickdownloadPdf保存/div/div/div/div
/template
script
// import Pdfh5 from pdfh5;
// import pdfh5/css/pdfh5.css;
import pdf from vue-pdf;
export default {name: Pdfh5,components: {pdf,},data() {return {pdfh5: null,title: 通知单,numPages: undefined,// 可引入网络文件或者本地文件pdfUrl: , // 如果引入本地pdf文件需要将pdf放在public文件夹下引用时使用绝对路径/表示public文件夹};},mounted() {try {let orderItem JSON.parse(this.$route.query.item);this.title orderItem.title;this.pdfUrl pdf.createLoadingTask(orderItem.pdfUrl);console.log( this.pdfUrl, this.pdfUrl);this.pdfUrl.promise.then((pdf) {this.numPages pdf.numPages;})} catch (e) {console.log(e)}// const pdfLink /web/viewer.html?file encodeURIComponent( this.pdfUrl);// document.getElementById(pdfViewer).src pdfLink;// fetch(this.pdfUrl, {// method: get,// mode: no-cors, //防止跨域// responseType: blob,// })// .then((response) response.blob())// .then((blob) {// const blobUrl URL.createObjectURL(blob);// console.log(blobUrl, blobUrl);// const pdfLink /web/viewer.html?file encodeURIComponent(blobUrl);// document.getElementById(pdfViewer).src pdfLink;// });//this.initPdf();},methods: {initPdf() {this.pdfh5 new Pdfh5(#pdf-content, {pdfurl: this.pdfUrl, // pdf 地址请求的地址需要为线上的地址测试的本地的地址是不可以的lazy: true, // 是否懒加载withCredentials: true,renderType: svg,maxZoom: 3, //手势缩放最大倍数 默认3scrollEnable: true, //是否允许pdf滚动zoomEnable: true, //是否允许pdf手势缩放});},downloadPdf() {console.log(开始下载);let body {url: this.pdfUrl,};if (config.isAndroid window.hesAndroidNative) {window.hesAndroidNative.openSystemBrowser(JSON.stringify(body));} else if (config.isIos window.webkit) {window.webkit.messageHandlers.openSystemBrowser.postMessage(JSON.stringify(body));} else {}// this.pdfh5.download(体检通知单);},},
};
/script
style scoped
.pdf_wrap {background: #fff;height: 90vh;
}
.pdf_list {height: 65vh;overflow: scroll;
}
.div-task-button {display: flex;align-items: center;width: 100%;justify-content: center;
}
.tasks-button {display: flex;background: white;padding-bottom: 10px;padding-top: 10px;border-radius: 20px;border: 1px solid #4a90e2;justify-content: center;color: #4a90e2;font-size: 16px;margin: 80px 20px;width: 100%;font-weight: 600;
}
/style
但是运行起来会有问题 Cannot read properties of undefined (reading ‘catch’) 这个是版本的问题需要修改源码要把node_modules\vue-pdf\src\pdfjsWrapper.js中第196行注释掉 //注释掉catch防止出现Cannot read properties of undefined (reading ‘catch’) // pdfRender.cancel().catch(function(err) { // emitEvent(‘error’, err); // });– 保存pdf
在pc端很好实现了但是嵌入到移动端的webview中包括IOS和android的兼容性之类的问题不太好实现最简单的饿一个办法就是Js调用原生app的方法打开默认浏览器用浏览器去保存 js方法呢就是这一段 downloadPdf() {console.log(开始下载);let body {url: this.pdfUrl,};if (config.isAndroid window.hesAndroidNative) {window.hesAndroidNative.openSystemBrowser(JSON.stringify(body));} else if (config.isIos window.webkit) {window.webkit.messageHandlers.openSystemBrowser.postMessage(JSON.stringify(body));} else {}// this.pdfh5.download(体检通知单);},android端的实现方法呢就是 //打开系统浏览器JavascriptInterfacepublic void openSystemBrowser(String param) {Gson gson new Gson();MapString,String map gson.fromJson(param, Map.class);String url map.get(url);Log.e(url,url);Intent intent new Intent(Intent.ACTION_VIEW, Uri.parse(url));if (intent.resolveActivity(getPackageManager()) ! null) {startActivity(intent);} else {// 没有可用的浏览器应用程序Toast.makeText(WebviewBase.this, 没有可用的浏览器应用程序, Toast.LENGTH_SHORT).show();}}
