在微信小程序可以通过wx.downloadFile 和 wx.openDocument 两个api下载并打开pdf文件。这种方式主要有不少的缺点： 1、需要下载才可以查看，且每次打开都需要下载生成一个临时文件，如果PDF文件比较多的话，临时文件会越来越多，且如果PDF文件比较大的话，打开会比较慢。 2、在导航栏显示标题是临时文件名，看上去不够优雅。 3、翻页不方便。 那PDF能不能在小程序直接预览呢？我尝试用微信小程序的web-view里显示PDF的文件，在开发工具里可以显示，但在真机里无法显示。在微信开放社区看有人用PDF.js在浏览器里打开PDF文件,PDF.js 由 Mozilla 提供支持,目标是创建一个通用的、基于 Web 标准的平台，用于解析和呈现 PDF. 通过web-view方式打开通过PDF.js解析的PDF文件，在微信开发工具里无法正常显示，不过好消息是：在真机里可以显示正常。 使用PDF.js来解析PDF方法如下： 1、去PDF.js官方网站下载此框架：https://mozilla.github.io/pdf.js/getting_started 2、把PDF.js部署到网站，PDF.js有两个文件夹web和build，把这两个文件放到网站的一个目录下比如pdfljs目录，在web目录下有个viewer.html文件，可以用它来在线解析pdf文件，当然pdf文件的链接需要在同一个域名，预览的方式是： [代码]https://wwww.domianname.com/pdfjs/web/viewer.html?file=xxx/xxx/xxx.pdf[代码] 然后在web-view打开这个链接，就可以直接预览PDF文件了 注意以上方式PDF文件的链接所在域名需要设置的小程序业务域名里。对于跨域的链接，虽然也支持，不过需要特别处理，具体详见链接：https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-xhr 利用PDF.js在微信小程序里预览PDF文件，支持支持PDF.js的相关功能，比如：侧栏，查找，分页，缩放，添加文字，绘图，旋转，演示模式等。 上面是通过官方viewer.html来显示PDF文件，也可以通过引入PDF.js的方式来解析和显示，这个方式就可以自定义功能。方法如下： 1、引入pdf.js库 <script src="./build/pdf.js"></script> <script src="./build//pdf.worker.js"></script> 2、用canvas接收需要读取到的pdf内容并显示 <canvas id="myCanvas"></canvas> 3、创建PDF对象：data可以是pdf文件对应的Base64字符串，也可以是文件所在相对或者绝对路径，也可以是一个在线文件url地址 var loadingTask = pdfjsLib.getDocument(data) loadingTask.promise.then(function (pdf) { for (var i = 1; i <= pdf.numPages; i++) { pdf.getPage(1).then(function (page) { var scale = 2 var viewport = page.getViewport({ scale: scale }) var canvas = document.getElementById('myCanvas') var context = canvas.getContext('2d') canvas.height = viewport.height canvas.width = viewport.width var renderContext = { canvasContext: context, viewport: viewport, }; page.render(renderContext); }) } }); 有关PDF.js的更多信息，可以参考官方网站：https://mozilla.github.io/pdf.js/

UI组件库合集，大家有遇到好的组件库，欢迎留言评论然后加入到文档里。 第一款： 官方WeUI组件库，地址 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/ 预览码： [图片] 第二款： ColorUI：地址 https://github.com/weilanwl/ColorUI 预览码：   [图片] 第三款： vantUI（又名：ZanUI）：地址 https://youzan.github.io/vant-weapp/#/intro 预览码： [图片] 第四款： MinUI： 地址 https://meili.github.io/min/docs/minui/index.html 预览码： [图片] 第五款： iview-weapp：地址 https://weapp.iviewui.com/docs/guide/start 预览码： [图片] 第六款： WXRUI：暂无地址 预览码： [图片] 第七款： WuxUI：地址https://www.wuxui.com/#/introduce 预览码： [图片] 第八款： WussUI：地址 https://phonycode.github.io/wuss-weapp/quickstart.html 预览码： [图片] 第九款： TouchUI：地址 https://github.com/uileader/touchwx 预览码: [图片] 第十款： Hello UniApp： 地址 https://m3w.cn/uniapp 预览码： [图片] 第十一款： TaroUI：地址 https://taro-ui.jd.com/#/docs/introduction 预览码： [图片] 第十二款： Thor UI： 地址 https://thorui.cn/doc/ 预览码： [图片] 第十三款： GUI：https://github.com/Gensp/GUI 预览码： [图片] 第十四款： QyUI：暂无地址 预览码： [图片] 第十五款： WxaUI：暂无地址 预览码： [图片] 第十六款： kaiUI： github地址 https://github.com/Chaunjie/kai-ui 组件库文档：https://chaunjie.github.io/kui/dist/#/start 预览码： [图片] 第十七款： YsUI：暂无地址 预览码： [图片] 第十八款： BeeUI：git地址 http://ued.local.17173.com/gitlab/wxc/beeui.git 预览码： [图片] 第十九款： AntUI： 暂无地址 预览码： [图片] 第二十款： BleuUI：暂无地址 预览码： [图片] 第二十一款： uniydUI：暂无地址 预览码： [图片] 第二十二款： RovingUI：暂无地址 预览码： [图片] 第二十三款： DojayUI：暂无地址 预览码： [图片] 第二十四款： SkyUI：暂无地址 预览码： [图片] 第二十五款： YuUI：暂无地址 预览码： [图片] 第二十六款： wePyUI：暂无地址 预览码： [图片] 第二十七款： WXDUI：暂无地址 预览码： [图片] 第二十八款： XviewUI：暂无地址 预览码： [图片] 第二十九款： MinaUI：暂无地址 预览码： [图片] 第三十款： InyUI：暂无地址 预览码： [图片] 第三十一款： easyUI：地址 https://github.com/qq865738120/easyUI 预览码: [图片] 第三十二款 Kbone-UI： 地址 https://wechat-miniprogram.github.io/kboneui/ui/#/ 暂无预览码 第三十三款 VtuUi： 地址 https://github.com/jisida/VtuWeapp 预览码： [图片] 第三十四款 Lin-UI 地址：http://doc.mini.talelin.com/ 预览码： [图片] 第三十五款 GraceUI 地址： http://grace.hcoder.net/ 这个是收费的哦～ 预览码： [图片] 第三十六款 anna-remax-ui npm：https://www.npmjs.com/package/anna-remax-ui/v/1.0.12 anna-remax-ui 地址： https://annasearl.github.io/anna-remax-ui/components/general/button 预览码 [图片] 第三十七款 Olympus UI 地址：暂无 网易严选出品。 预览码 [图片] 第三十八款 AiYunXiaoUI 地址暂无 预览码 [图片] 第三十九款 visionUI npm：https://www.npmjs.com/package/vision-ui 预览码： [图片] 第四十款 AnimaUI(灵动UI) 地址：https://github.com/AnimaUI/wechat-miniprogram 预览码： [图片] 第四十一款 uView 地址：http://uviewui.com/components/quickstart.html 预览码： [图片] 第四十二款 firstUI 地址：https://www.firstui.cn/ 预览码： [图片]