uni-app 预览pdf文件
<p><img src="https://img2020.cnblogs.com/blog/718318/202107/718318-20210713170711034-1068901716.png"></p><p>安卓uni-app实现pdf文件预览功能：</p>
<p>1.https://mozilla.github.io/pdf.js/getting_started/#download下载</p>
<p><img src="https://img2020.cnblogs.com/blog/718318/202107/718318-20210713164608447-1539590263.png"></p>
<p>放在根目录下，</p>
<p><img src="https://img2020.cnblogs.com/blog/718318/202107/718318-20210713164707152-735396548.png"></p>
<p>2.新建一个webView页面</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)"> 1</span> <template>
<span style="color: rgba(0, 128, 128, 1)"> 2</span> <view style="width: 100%;" >
<span style="color: rgba(0, 128, 128, 1)"> 3</span> <web-view :src="allUrl"></web-view>
<span style="color: rgba(0, 128, 128, 1)"> 4</span> </view>
<span style="color: rgba(0, 128, 128, 1)"> 5</span> </template>
<span style="color: rgba(0, 128, 128, 1)"> 6</span>
<span style="color: rgba(0, 128, 128, 1)"> 7</span> <script>
<span style="color: rgba(0, 128, 128, 1)"> 8</span> export <span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 128, 1)"> 9</span> <span style="color: rgba(0, 0, 0, 1)"> data() {
</span><span style="color: rgba(0, 128, 128, 1)">10</span> <span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 128, 1)">11</span> allUrl:''<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">12</span> viewerUrl: '/hybrid/html/web/viewer.html', <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 格式化文件流的一个js 文件</span>
<span style="color: rgba(0, 128, 128, 1)">13</span> <span style="color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">14</span> <span style="color: rgba(0, 0, 0, 1)"> },
</span><span style="color: rgba(0, 128, 128, 1)">15</span> <span style="color: rgba(0, 0, 0, 1)"> onLoad(options) {
</span><span style="color: rgba(0, 128, 128, 1)">16</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> encodeURIComponent 函数可把字符串作为 URI 组件进行编码。decodeURIComponent解码</span>
<span style="color: rgba(0, 128, 128, 1)">17</span> let fileUrl =<span style="color: rgba(0, 0, 0, 1)"> encodeURIComponent(decodeURIComponent(options.fileUrl));
</span><span style="color: rgba(0, 128, 128, 1)">18</span> <span style="color: rgba(0, 0, 255, 1)">this</span>.allUrl = <span style="color: rgba(0, 0, 255, 1)">this</span>.viewerUrl + '?file=' +<span style="color: rgba(0, 0, 0, 1)"> fileUrl
</span><span style="color: rgba(0, 128, 128, 1)">19</span> <span style="color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">20</span> <span style="color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">21</span> </script></pre>
</div>
<p>3.前一个页面增加跳转：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 预览pdf</span>
<span style="color: rgba(0, 128, 128, 1)">2</span> <span style="color: rgba(0, 0, 0, 1)">toViewFile(item) {
</span><span style="color: rgba(0, 128, 128, 1)">3</span> let fileUrl = `${<span style="color: rgba(0, 0, 255, 1)">this</span>.baseUrl}/share/downloadFile?filePath=${item.filePath}&fileName=<span style="color: rgba(0, 0, 0, 1)">${item.fileName}`;
</span><span style="color: rgba(0, 128, 128, 1)">4</span> <span style="color: rgba(0, 0, 0, 1)"> uni.navigateTo({
</span><span style="color: rgba(0, 128, 128, 1)">5</span> url: '/pages/webView/webView?fileUrl='+<span style="color: rgba(0, 0, 0, 1)"> encodeURIComponent(fileUrl)
</span><span style="color: rgba(0, 128, 128, 1)">6</span> <span style="color: rgba(0, 0, 0, 1)"> });
</span><span style="color: rgba(0, 128, 128, 1)">7</span> },</pre>
</div>
<p><span style="color: rgba(255, 0, 0, 1)">由于url路径比较长，带有&符号，传参，&后面的会被截断，故需要加上encodeURIComponent。完美解决pdf无法打开问题。</span></p>
<p> </p>
<p><span style="color: rgba(0, 0, 0, 1)">相关网站：https://mozilla.github.io/pdf.js/getting_started/#download </span></p>
<p><span style="color: rgba(0, 0, 0, 1)"> https://blog.csdn.net/mwh_user/article/details/112368597</span></p>
<p> </p>
<h3 id="articleContentId" class="title-article">【预览pdf】:uniapp在微信小程序预览pdf，兼容安卓/IOS</h3>
<p>https://blog.csdn.net/weixin_49521721/article/details/114064682?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&utm_relevant_index=2</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/guwufeiyang/p/14962051.html
頁:
[1]