网站建设明细报价表仅供参考,网站后台扫描插件,低价网站建设优化公司,抖音网站H5移动端文件预览pdf 需求#xff1a;H5页面嵌入浙政钉#xff0c;需要文件预览Pdf。 试用了多个插件#xff0c;踩了很多坑#xff0c;如果小伙伴有类似填坑经历#xff0c;并成功解决#xff0c;感谢留言指点#xff01;#xff01;#xff01; 先讲最终方案#x…H5移动端文件预览pdf 需求H5页面嵌入浙政钉需要文件预览Pdf。 试用了多个插件踩了很多坑如果小伙伴有类似填坑经历并成功解决感谢留言指点 先讲最终方案兼容ios安卓鸿蒙多种系统手机移动端和pc端的pdf预览方式 — pdf.js iframe。 成功案例 pdf.js iframe
步骤一 下载 pdf.js , pdfjs 下载地址https://pan.baidu.com/s/1Meh_hSlwCPvN6wPKzYNfyQ
提取码pdfj
步骤二 把下载下来的文件夹放到项目中。注意放在不会被打包压缩的地方比如 public 或 static 文件夹中因为后面会用到web 文件中的 view.html 对文件地址进行代理。【注viewer.html 是pdf 的查看器】
步骤三新建一个组件pdfjs.vue templatediviframe width100% styleheight: 100vh;border:none; :srcpdfSrc/iframevan-button classclose clickclosePdf关闭/van-button/div/templatescriptexport default {name: pdf,props: {pdfurl: {type: String,},},data(){return {pdfSrc: }},mounted() {console.log(pdfurl, this.pdfurl)// 此处我是把文件夹放到public中pdf文件夹就在打包完的文件夹下pdf/web/viewer.htmlthis.pdfSrc ${window.location.origin window.location.pathname}pdf/web/viewer.html?file${encodeURIComponent(this.pdfurl)}console.log(pdfSrc, this.pdfSrc)},methods: {closePdf() {this.$emit(closePdf)}}}/scriptstyle scoped.close {position: absolute;left: 0;bottom: 0;height: 80px;width: 100%;line-height: 40px;text-align: center;color:#367CFD;font-size: 36px;background: #fff;}/style步骤四: 使用 templatediv!-- ... --van-popup v-modelpreviewFile positionbottompdf :pdfurlpreFileUrl closePdfclosePdfFn/pdf/van-popup/div/templatescript// 引入pdfjs组件import pdf from ../../components/pdfjs.vueexport default {components: {pdf},data() {return {previewFile: false,preFileUrl: , // https://xxxx?keyxxx.pdf}},mounted() {},methods: {oprenPdfFn() {this.previewFile true},closePdfFn() {this.previewFile false}}}/script其他踩了很多坑的方案结果还是不行时间关系没再仔细研究
经过下面几个插件的试用发现ios都能展示而且用a标签也可以展示应该是内置了预览组件。安卓和鸿蒙就不行自带浏览器也都是直接跳下载谷歌浏览器可以预览。
1. 简单的前端处理方式
url: 文件地址(一般为文件流形式)
a 标签, a :hrefurl/awindow.open(url) //新建窗口打开链接预览
window.location.href 文档地址; //本页面内跳转链接实现预览iframe 预览iframe :srcurl width100% height100vh/iframe以上方式部分浏览器 或 手机app不能直接打开会自动回退成下载链接比如鸿蒙比如IEiframe内嵌常见问题https://blog.csdn.net/qq_35408366/article/details/128447408
2. pdfh5 预览(移动端h5) npm install pdfh5 , 会报错需要其他依赖不能直接用提示的语句直接npm下载依旧会报错npm报错These dependencies were not found:* canvas in ./node_modules/pdfh5/js/pdf.js* dommatrix/dist/d npm install canvas2.8.0 --ignore-scripts npm install --save dommatrix npm install --save web-streams-polyfill 运行就成功了亲测可行但是pc端运行打不开 pdf的文件【vue-pdf 和 pdfh5 不可同时引用】而且需要点两次才能获取到 pdfh5 这个对象。 引用 pdfh5 和 css【关于css的引入方式网上也有踩了很多坑的下面这种是最佳方式亲测可行】 import Pdfh5 from pdfh5import pdfh5/css/pdfh5.css定义容器【id】 div idpdf-content styleheight: 100%;width: 100%/divopenPdf(url) {// pdfh5实例化时传两个参数selector选择器options配置项参数会返回一个pdfh5实例对象// 可以用来操作pdf监听相关事件this.pdfh5 new Pdfh5(#pdf-content, {pdfurl: url || this.preFileUrl,lazy: false, // 是否懒加载,默认falserenderType: canvas, // canvas、svg默认canvasmaxZoom: 3, // 手势缩放最大倍数,默认3scrollEnable: true, // 是否允许pdf滚动,默认truezoomEnable: true,// 是否允许pdf手势缩放,默认truelimit: 0, // 限制pdf加载最大页数,默认0不限制goto: 1,// 设置每一页pdf上的水印// logo: { src: require(/assets/images/icon27.png), x: 20, y: 70, width: 60, height: 60 },});console.log(pdfh5, this.pdfh5)// 监听pdf准备开始渲染此时可以拿到pdf总页数this.pdfh5.on(ready, function(totalNum) {console.log(总页数: totalNum);});// 监听pdf加载完成事件加载失败、渲染成功都会触发this.pdfh5.on(complete, (status, msg, time) {console.log(状态: status 信息: msg 耗时: time 毫秒);})},
vue2 和 vue3 代码举例 https://blog.csdn.net/u014212540/article/details/129408653
遇到的问题
下载依赖一直报错无法正常运行切换 node 和 npm 版本都无果。解决方式参考上文1234按次序下载依赖。pc端运行打不开 pdf 的文件【vue-pdf 和 pdfh5 冲突不可同时引用原因未细究】而且需要点两次才能获取到 pdfh5 这个对象【未解决】安卓直接打不开项目ios可以正常打开且能预览
3.vue-pdf 预览
遇到问题
vue-pdf 默认只能显示第一页通过获取总页数遍历解决。vue-pdf 默认不可手机端两指放大缩小加 页面放大缩小 templatediv classpdf_wrapdiv classpdf_btnvan-button clickscaleD()放大/van-buttonvan-button clickscaleX()缩小/van-buttonvan-button clickclock()顺时针/van-buttonvan-button clickcounterClock()逆时针/van-button/divdiv classpdf_list!-- src:pdf地址page: 当前显示页 --pdfrefpdfv-fori in numPages:keyi:srcsrc:pagei:rotatepageRotatestylewidth: 100%/pdf/divvan-button classclose clickclosePdf关闭/van-button/div/template scriptimport pdf from vue-pdf;import CMapReaderFactory from vue-pdf/src/CMapReaderFactory.js// import pdf from vue-pdf/src/vuePdfNoSssNoWorker.vue;export default {components: {pdf,},props: {pdfurl: {type: String,},},data() {return {src: ,numPages: undefined,scale: 100,pageRotate: 0}},mounted() {console.log(pdf, pdf)this.loadPdf(this.pdfurl)},methods: {loadPdf(url) {console.log(url, url)this.src pdf.createLoadingTask({url,// pdf内容文字丢失cMapUrl: https://cdn.jsdelivr.net/npm/pdfjs-dist2.5.207/cmaps/,//引入pdf.js字体cMapPacked: true,// 动态文字不展示问题CMapReaderFactory})console.log(this.src, src)this.src.promise.then(pdf {console.log(pdf, pdf)this.numPages pdf.numPages // 这里拿到当前pdf总页数}).catch(err {console.log(err, err)})console.log(this.src, src11111)},closePdf() {this.$emit(closePdf)},//放大scaleD() {this.scale 20;console.log(refs.pdf, this.$refs.pdf)if (this.$refs.pdf this.$refs.pdf.length 0) {this.$refs.pdf.forEach(pdfPage{pdfPage.$el.style.width parseInt(this.scale) %;})} else {this.$refs.pdf.$el.style.width parseInt(this.scale) %;}},//缩小scaleX() {if (this.scale 100) {return;}this.scale -20;if (this.$refs.pdf this.$refs.pdf.length 0) {this.$refs.pdf.forEach(pdfPage{pdfPage.$el.style.width parseInt(this.scale) %;})} else {this.$refs.pdf.$el.style.width parseInt(this.scale) %;}},// 顺时针clock() {this.pageRotate 90;},// 逆时针counterClock() {this.pageRotate - 90;}}}/scriptstyle scoped.pdf_btn button {color:#367CFD;}.pdf_wrap {background: #fff;height: 100vh;position: relative;}.pdf_list {height: 100vh;overflow: scroll;}.close {position: absolute;left: 0;bottom: 0;height: 60px;width: 100%;line-height: 40px;text-align: center;color:#367CFD;font-size:30px;background: #fff;}/stylevue-pdf 不太友好网上有说用 vue-pdf-signature 替代依旧一样的问题。 安卓显示不全鸿蒙白屏ios可以显示。
网上解决方法https://blog.csdn.net/PokoMobula/article/details/103164795未解决问题https://blog.csdn.net/weixin_44612172/article/details/127783210, 未解决问题
引入上面的字体后安卓直接白屏iOS依然可以显示。问题依旧。
4.pfile 代理 let url https://xxxx?keyxxx.pdflet pfileUrl http://www.pfile.com.cn/api/profile/onlinePreview?urlencodeURIComponent(url)window.open(pfileUrl);遇到问题
三种手机系统都打不开需要手动转跳到浏览器中打开浏览器都能正常预览。
预测方案按成功方案预测iframe pfile 代理应该也能实现。
