PDF.js跨域（django后端处理数据流方法）

前言

PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5.
下载地址https://github.com/mozilla/pdf.js/releases

跨域

网上也有一些设置nginx服务器实现跨域，这里只考虑是把pdf文件请求到后端返回数据流的形式来实现

• 首先

1. 修改viewer.js

function webViewerLoad() {
  var config = getViewerConfiguration();
  window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;
  window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions;
  var event = document.createEvent('CustomEvent');
  event.initCustomEvent('webviewerloaded', true, true, {});
  document.dispatchEvent(event);
  pdfjsWebApp.PDFViewerApplication.run(config);
}

改成

window.webViewerLoad=function webViewerLoad(fileUrl) {//调整了此行
  var config = getViewerConfiguration();
  window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;
  window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions;
  var event = document.createEvent('CustomEvent');
  event.initCustomEvent('webviewerloaded', true, true, {});
  document.dispatchEvent(event);
  //调整了if 语句
  if(fileUrl){
    config.defaultUrl=fileUrl;
  }
  pdfjsWebApp.PDFViewerApplication.run(config);
}

2. 注释

if (document.readyState === 'interactive' || document.readyState === 'complete') {
  webViewerLoad();
} else {
  document.addEventListener('DOMContentLoaded', webViewerLoad, true);
}

3. 修改viewer.js

run(config) {
    this.initialize(config).then(webViewerInitialized);
  }

改成

run(config) {
    //添加if语句
    if(config.defaultUrl){
      _app_options.AppOptions.set('defaultUrl',config.defaultUrl)

   }    
   this.initialize(config).then(webViewerInitialized);
  },

4. 添加代码viewer.html
   

然后

• django 接口代码 来处理文件流

class PDFstreamViewsets(mixins.ListModelMixin, GenericViewSet):
    def list(self, request, *args, **kwargs):
        url = request.query_params.get('pdfurl', None)
        if not url:
            return JsonResponse({'status': '0000'})
        try:
            r = requests.get(url, stream=True)
        except:
            r = ''
        fd = io.BytesIO()
        for chunk in r.iter_content(2000):
            fd.write(chunk)
        return StreamingHttpResponse(streaming_content=(fd.getvalue(),), content_type='application/octet-stream')

urls.py

# 注册URL路径，要求添加template文件目录，这里不再赘述
path('pdf_viewer/', TemplateView.as_view(template_name='viewer.html'), name='test'),

最后

访问 http://127.0.0.1:8088/pdf_viewer/?pdfurl=http://www.mee.gov.cn/image20010518/5295.pdf
可以看到效果了