在 JavaScript 异步接收到的浏览器中显示 pdf

我有一个 Django 应用程序，我从 JS 打电话索要 pdf。 Django视图返回 HttpResponse 的 application/pdf

如何让JS将接收到的 application/pdf 数据显示为pdf？

Django视图

def pdf_generation(request):
    context = {}
    t = get_template('html_pdf.html')
    html_string = t.render(context)
    result = HTML(string=html_string)
    css = CSS('/static/css/pdf.css')
    pdf_in_memory = BytesIO()
    HTML(string=html_string).write_pdf(pdf_in_memory, stylesheets=[css])

    return HttpResponse(pdf_in_memory.getvalue(), content_type="application/pdf")

JS

async function getData_pdf() {
try {
    const response = await fetch('http://192.168.1.2:8000/pdf/'); 
    if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.text();
    data.type('application/pdf');
    data.end(pdf, 'binary');
} catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
}
};

你的思路是正确的，但需要做一些调整才能在浏览器中显示 PDF。

错误分析

你的 JavaScript 代码中存在一些错误：

1. data.type('application/pdf') 和 data.end(pdf, 'binary') 是 Node.js 中 response 对象的方法，浏览器环境中没有这些方法。
2. response.text() 方法会将响应体解析为文本，而你需要的是二进制数据来显示 PDF。

解决方案

以下是修改后的 JavaScript 代码：

async function getData_pdf() {
  try {
    const response = await fetch('http://192.168.1.2:8000/pdf/');
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }

    // 获取二进制数据
    const data = await response.blob();

    // 创建 Blob URL
    const pdfUrl = URL.createObjectURL(data);

    // 在新的标签页或窗口中打开 PDF
    window.open(pdfUrl, '_blank');

    // 或者，将 PDF 嵌入到页面中
    // const iframe = document.createElement('iframe');
    // iframe.src = pdfUrl;
    // iframe.width = '100%';
    // iframe.height = '800px';
    // document.body.appendChild(iframe);

  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
};

代码解释

1. response.blob() : 这个方法会返回一个 Promise，解析为一个包含二进制数据的 Blob 对象。
2. URL.createObjectURL(data) : 这个方法会创建一个指向 Blob 对象的 URL，可以在浏览器中使用。
3. window.open(pdfUrl, '_blank') : 这个方法会在新的标签页或窗口中打开指定的 URL，这里就是 PDF 的 URL。
4. 嵌入 PDF (可选): 你也可以创建一个 iframe 元素，并将 PDF 的 URL 设置为 src 属性，从而将 PDF 嵌入到当前页面中。

注意:

• 确保你的 Django 视图返回的 Content-Disposition 标头设置为 inline ，以便浏览器尝试直接打开 PDF 文件。 你可以在 Django 视图中添加以下代码：

response['Content-Disposition'] = 'inline; filename="mypdf.pdf"'

• 不同浏览器对 PDF 显示的支持程度不同，有些浏览器可能需要安装插件才能正常显示 PDF。

希望以上信息能帮到你！