PDF.js在百度和夸克浏览器中无法下载PDF，怎么解决？

Question

使用uniapp开发的H5项目，需求是要求预览pdf，然后点击下载。目前是百度浏览器和夸克浏览器无法通过pdf.js下载pdf文件

<view>
<iframe :src="pdfUrl" ref="iframe" class="pdf-iframe"@load="handleLoad" style="display: none;"> 
</iframe>
</view>

onLoad(options) {
uni.showLoading({
title: ''
})
this.pdfUrl = '/hybrid/html/web/viewer.html?file='+encodeURIComponent(options.src)

// 监听 iframe 加载完成
this.$nextTick(() => {
const iframe = this.$refs.iframe;
if (iframe) {
    iframe.onload = this.handleLoad;
    iframe.onerror = this.handleError;
    iframe.style.display = "block"; // 显示 iframe
}
});
},

methods:{
handleLoad(){
uni.hideLoading()
},
handleError(){
uni.hideLoading()
uni.showToast({
    title: '加载失败',
    icon: 'none'
})
}
}

以上是PDF预览页面部分代码。小米系统浏览器、QQ浏览器、chrome都可以下载，百度浏览器和夸克浏览器下载失败。

Answer 1

1. 修改PDF.js预览页面

在 viewer.html 文件中添加一个下载按钮：

<!-- 在工具栏中添加下载按钮 -->
<div id="toolbar">
  <!-- 其他工具栏按钮 -->
  <button id="downloadButton">下载PDF</button>
</div>

2. 添加下载功能

在 viewer.js 中添加下载功能的实现，确保引入 FileSaver.js 库，并添加下载按钮的事件监听器：

<!-- 引入FileSaver.js库 -->
<script src="path/to/FileSaver.min.js"></script>

在 viewer.js 中添加以下代码：

document.getElementById('downloadButton').addEventListener('click', function() {
  fetch(PDFViewerApplication.url)
    .then(response => response.blob())
    .then(blob => {
      saveAs(blob, '文件名.pdf');
    })
    .catch(error => {
      console.error('下载失败:', error);
    });
});

3. 修改uniapp代码

确保在 uniapp 中正确设置 PDF.js 的预览页面路径，并传递 PDF 文件的 URL：

<template>
  <view>
    <iframe :src="pdfViewerUrl" ref="iframe" class="pdf-iframe" style="display: block;"></iframe>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: '',
      pdfViewerUrl: ''
    };
  },
  onLoad(options) {
    uni.showLoading({
      title: ''
    });
    this.pdfUrl = options.src;
    this.pdfViewerUrl = '/hybrid/html/web/viewer.html?file=' + encodeURIComponent(this.pdfUrl);

    // 监听 iframe 加载完成
    this.$nextTick(() => {
      const iframe = this.$refs.iframe;
      if (iframe) {
        iframe.onload = this.handleLoad;
        iframe.onerror = this.handleError;
      }
    });
  },
  methods: {
    handleLoad() {
      uni.hideLoading();
    },
    handleError() {
      uni.hideLoading();
      uni.showToast({
        title: '加载失败',
        icon: 'none'
      });
    }
  }
};
</script>

逻辑解释

1. 在PDF.js预览页面中添加下载按钮：

   • 在 viewer.html 中添加一个下载按钮。
   • 在 viewer.js 中添加下载按钮的事件监听器，使用 FileSaver.js 库实现下载功能。

2. 在uniapp中设置PDF.js预览页面路径：

   • 在 onLoad 方法中，设置 pdfUrl 和 pdfViewerUrl，并传递给 iframe 进行预览。
   • 监听 iframe 的加载事件，确保加载完成后隐藏加载动画。