Vue.js中使用fetch获取PDF文件时无法转换为JSON的问题咨询

你遇到的问题根源很明确：PDF是二进制文件，不是JSON格式，所以调用response.json()必然会抛出语法错误——报错信息里的%PDF-1.7就是PDF文件的标准开头标识，说明接口返回的是PDF内容而非JSON数据。

下面根据不同需求给出正确的处理方案：

方案1：预览或下载PDF文件 #

如果只是需要在浏览器中预览PDF，或者提供下载功能，可以将响应转为Blob对象，再生成可访问的URL：

fetch(url, {
  credentials: 'same-origin',
}).then((response) => {
  return response.blob(); // 将响应转为Blob（二进制文件对象）
}).then((blob) => {
  const pdfUrl = URL.createObjectURL(blob);
  
  // 方式A：用iframe嵌入预览
  const iframe = document.createElement('iframe');
  iframe.src = pdfUrl;
  iframe.style.width = '100%';
  iframe.style.height = '600px';
  document.body.appendChild(iframe);

  // 方式B：生成下载链接
  const downloadLink = document.createElement('a');
  downloadLink.href = pdfUrl;
  downloadLink.download = 'my-document.pdf'; // 设置下载文件名
  downloadLink.textContent = '下载PDF文件';
  document.body.appendChild(downloadLink);
}).catch((ex) => {
  console.error('获取PDF失败:', ex);
});

方案2：提取PDF中的文本内容 #

如果需要读取PDF里的文本内容，必须使用专门的PDF解析库（比如pdf.js），步骤如下：

// 假设已引入PDF解析库的相关代码
fetch(url, {
  credentials: 'same-origin',
}).then((response) => {
  return response.arrayBuffer(); // 将响应转为ArrayBuffer格式
}).then((arrayBuffer) => {
  // 初始化PDF文档
  return pdfjsLib.getDocument({ data: arrayBuffer }).promise;
}).then((pdfDoc) => {
  // 读取第一页内容（如需全部页面可循环遍历）
  return pdfDoc.getPage(1);
}).then((page) => {
  return page.getTextContent();
}).then((textContent) => {
  // 拼接所有文本片段
  const fullText = textContent.items.map(item => item.str).join(' ');
  console.log('PDF文本内容:', fullText);
}).catch((ex) => {
  console.error('解析PDF失败:', ex);
});

总结 #

PDF本身不具备JSON格式，无法直接转换为JSON来读取内容。你需要根据实际需求选择处理方式：要么直接预览/下载文件，要么借助PDF解析库提取文本。

内容的提问来源于stack exchange，提问作者Naveena Sreenivasan