安卓端谷歌Chrome浏览器中target="_blank"属性失效问题求助

方法1：配置服务器响应头（推荐方案） #

安卓Chrome对PDF的打开/下载行为，主要由服务器返回的HTTP响应头控制：

• 确保服务器返回的Content-Type头值为application/pdf
• 设置Content-Disposition头为inline; filename="catalogue.pdf"，明确告知浏览器以内联方式打开文件，而非作为附件下载

不同服务器的配置示例：

• Nginx：在站点配置文件或对应location块中添加：

  location /catalogue/catalogue.pdf {
      add_header Content-Type application/pdf;
      add_header Content-Disposition 'inline; filename="catalogue.pdf"';
  }
  

• Apache：在项目根目录的.htaccess文件中添加：

  <Files "catalogue.pdf">
      Header set Content-Type application/pdf
      Header set Content-Disposition "inline; filename=catalogue.pdf"
  </Files>
  

方法2：前端嵌入PDF（无需修改服务器） #

如果无法调整服务器配置，可以通过前端渲染PDF的方式模拟新标签页打开效果：

1. 下载PDF.js库到本地项目目录，新建一个空白页面（比如pdf-viewer.html），添加以下代码：

   <!DOCTYPE html>
   <html>
   <head>
       <title>Catalogue</title>
       <!-- 引入本地的PDF.js核心文件 -->
       <script src="/libs/pdf.min.js"></script>
       <style>
           canvas { display: block; margin: 0 auto; max-width: 100%; }
       </style>
   </head>
   <body>
       <div id="pdf-container"></div>
       <script>
           // 获取URL参数中的PDF地址
           const pdfUrl = new URLSearchParams(window.location.search).get('url');
           if (pdfUrl) {
               // 加载并渲染PDF
               pdfjsLib.getDocument(decodeURIComponent(pdfUrl)).promise.then(pdf => {
                   // 逐页渲染PDF内容
                   for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
                       pdf.getPage(pageNum).then(page => {
                           const canvas = document.createElement('canvas');
                           const ctx = canvas.getContext('2d');
                           const viewport = page.getViewport({ scale: 1.5 });
                           canvas.height = viewport.height;
                           canvas.width = viewport.width;
                           page.render({ canvasContext: ctx, viewport: viewport });
                           document.getElementById('pdf-container').appendChild(canvas);
                       });
                   }
               });
           }
       </script>
   </body>
   </html>
   

2. 修改原链接，指向这个预览页面并传递PDF路径：

   <a href="/pdf-viewer.html?url=%2Fcatalogue%2Fcatalogue.pdf" target="_blank">Catalogue</a>
   

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