注册功能网站建设,公司取名三个字推荐,四川工程造价信息网官网,免费外贸网站建设1.下载pdf.js库文件 前往 pdf.js 的 官网 下载库文件#xff0c;下哪个版本都可以#xff0c;后者适用于旧版浏览器#xff0c;所以我下载的是后者 下载完成后#xff0c;因为微信小程序打包的限制#xff0c;我将库文件放到项目的后台系统了#xff0c;在h5端处理会比在…1.下载pdf.js库文件 前往 pdf.js 的 官网 下载库文件下哪个版本都可以后者适用于旧版浏览器所以我下载的是后者 下载完成后因为微信小程序打包的限制我将库文件放到项目的后台系统了在h5端处理会比在小程序端处理方便最后就用web-view标签嵌入到小程序即可 2.将下载好的pdf.js导入h5项目
2.1、目录结构 2.2、h5端使用pdf.js 新建一个文件夹–新建一个.vue文件用来展示pdf文件–使用iframe标签承接pdf文件 运行能打开默认的pdf文件就证明成功了 pdf.vue
template!-- pdf详情页 --diviframe :src../../../public/pdfjs-3.5.141-legacy-dist/web/viewer.html width100% height700px;/iframe/div
/templatescript import { useRouter } from vue-router;
export default {name: pdf,setup() {document.title pdf详情页 // 修改本页面网页标题const route useRouter()return {}}
}
/scriptstyle/style注有可能会出现以下报错只需要找到viewer.html将script标签的type修改成module即可 然后运行项目本页面能打开默认的pdf文件就证明成功了 2.3、嵌入到小程序中 template!-- pdf详情页 --diviframe :srcfile width100% height700px;/iframe/div
/templatescript import { useRouter } from vue-router;
export default {name: pdf,setup() {document.title pdf详情页 // 修改本页面网页标题const route useRouter()console.log(route.currentRoute.value.query.file);let file route.currentRoute.value.query.file; // 获取当前url参数if (file) {file ../../../public/pdfjs-3.5.141-legacy-dist/web/viewer.html?file${file} // 找到参数则展示指定pdf} else {file ../../../public/pdfjs-3.5.141-legacy-dist/web/viewer.html // 若没有找到参数打开默认pdf文件}return {file}}
}
/scriptstyle/style通过小程序传来的参数h5端就能访问到pdf利用pdf.js自带的关键词检索就能完成业务需求啦 如果出现跨域问题的话在viewer.js文件中找到以下代码注释掉即可
