I am using the latest version of firefox and the pdf that I am trying to load are not displayed. In chrome, my code does work, but I'm not sure if I'm forgetting some ad,angular"/>

时间戳

首页 > 解决方案 > 看一个 .pdf 与 tag not loads in firefox or other way to achieve

I am using the latest version of firefox and the pdf that I am trying to load are not displayed. In chrome, my code does work, but I'm not sure if I'm forgetting some ad

angular - 看一个 .pdf 与 tag not loads in firefox or other way to achieve

I am using the latest version of firefox and the pdf that I am trying to load are not displayed. In chrome, my code does work, but I'm not sure if I'm forgetting some ad

问题描述

I am using the latest version of firefox and the pdf that I am trying to load are not displayed. In chrome, my code does work, but I'm not sure if I'm forgetting some additional configuration for firefox to show me the PDFs.

how can I solve that?

this is my code:

import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
} 

<object *ngIf="pdf" [data]="pdf | safe" type="application/pdf" width="100%" height="100%">
<p><b>Example fallback content</b>: This browser does not support PDFs. Please download the PDF to view it: 
<a href=".pdf">Download PDF</a>.</p>
</object>

<button (click)="loadPdf1()">Load Pdf 1</button>
<button (click)="loadPdf2()">Load Pdf 2</button>  

loadPdf1(){
  this.pdf="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
}
loadPdf2(){
  this.pdf="https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf"
}

this is the response on the console web

enter image description here

Or what else can I do to load a PDF in Firefox without installing an additional library?

https://stackblitz.com/edit/angular-19b9ne?file=src%2Fapp%2Fapp.module.ts

This is not an answer, it's just a comment: As you can see the next example works the same way in Chrome and FF. There must be something else in your code that is causing the problem.

svg{border:1px solid;}
<svg viewBox="240 120 90 50">
  <rect x="260" y="135" width="50" height="20" fill="none" stroke="black" />
  
  <text id="txt"
    transform="matrix(1 0 0 1 262.6731 147.9746)"
    fill="#1D1D1B"
    font-family='Calibri'
    font-size="11"
  >
    Betrieb
  </text>
</svg>

UPDATE

The OP added more code.

I've replaced the <tspan> with <text> elements. Instead of having the <a> inside the text, now the <a> is wrapping the text. Also I've replaced your image with a shadow generated with an svg filter.

svg{border:1px solid}
text{fill:#949495;font-family:Calibri;font-size:11;text-anchor:middle}
<svg viewBox="480 140 78 60">
   <defs>
    <filter id="f">
       <feGaussianBlur in="SourceAlpha" stdDeviation="1.3" result="desenfoque"></feGaussianBlur>
       <feOffset in="desenfoque" dx="0" dy="0" result="sombra"></feOffset>
       <feMerge>
         <feMergeNode in="sombra"></feMergeNode>
         <feMergeNode in="SourceGraphic"></feMergeNode>
       </feMerge>
    </filter>
  </defs>
  
  <a href="https://www.google.ch" target="_blank">
    <g>
      <g>
        <g filter="url(#f)">
          <polygon
            fill="red"
            points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
          />
          <polygon
            fill="none"
            stroke="#D9D9D9"
            stroke-width="0.75"
            stroke-linejoin="round"
            stroke-miterlimit="10"
            points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
          />
        </g>
      </g>
    </g>
  </a>
  <a href="https://google.ch">
  <text x="518.5" y="167" >KVP</text>
  </a>
  <a href="https://google.ch">
  <text x="518.5" y="180" >[VP]</text>
  </a>
  
  <!--This path has a width and a height == 0 
  you can delete it -->
  <path 
    fill="none"
    stroke="#A3D2C4"
    stroke-width="0.75"
    stroke-linejoin="round"
    stroke-miterlimit="10"
    d="M664.349,162.086"
  />
    
</svg>

标签： angular

解决方案

推荐阅读