0

Возникла проблема с отображением pdf документа на angular.

Делал по этим туториалам: medium.com npmjs

Ошибка:

ERROR Error: Uncaught (in promise): DataCloneError: Failed to execute 
'postMessage' on 'Worker': TypeError: Failed to fetch could not be cloned.
Error: Failed to execute 'postMessage' on 'Worker': TypeError: Failed to fetch 
could not be cloned.

Нашел несколько ответов на github, единственным, кажется решением было использование angular + electron. Можно ли обойтись без этой связки? И почему возникает данная ошибка?

pdf-viewer.component.html

<pdf-viewer [src]="pdfSrc" [render-text]="true" style="display: block"></pdf-viewer>

pdf-viewer.component.ts

export class PdfViewerComp implements OnInit {

  pdfSrc: string = 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf';

  constructor() { }

  ngOnInit() { }
}

Снимок ошибки:

Стек трейс ошибки

Стек трейс ошибки со страницей

AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { FormUploadComponent } from './form-upload/form-upload.component';
import { DocumentService} from './service/document.service';
import { FormClassService} from './service/fromclass.service';
import { TypeDocService} from './service/typedoc.service';
import { HttpClientModule} from '@angular/common/http';
import { ListDocumentComponent } from './list-document/list-document.component';
import { FormEditComponent } from './form-edit/form-edit.component';
import { PdfViewerModule } from 'ng2-pdf-viewer';
import { PdfViewerComp } from './pdf-viewer/pdf-viewer.component';

@NgModule({
  declarations: [
    AppComponent,
    FormUploadComponent,
    ListDocumentComponent,
    FormEditComponent,
    PdfViewerComp
  ],
  imports: [
    routing,
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    PdfViewerModule,
  ],
  providers: [DocumentService, FormClassService, TypeDocService],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppRouting:

import { RouterModule, Routes } from '@angular/router';
import { FormEditComponent } from './form-edit/form-edit.component';
import { FormUploadComponent } from './form-upload/form-upload.component';
import { ListDocumentComponent } from './list-document/list-document.component';
import { PdfViewerComp } from './pdf-viewer/pdf-viewer.component';

const routes: Routes = [
    // { path: 'list-document', component: ListDocumentComponent },
    { path: '', component: ListDocumentComponent},
    { path: 'edit-document', component: FormEditComponent },
    { path: 'upload-document', component: FormUploadComponent },
    { path: 'pdf-view', component: PdfViewerComp }
];

export const routing = RouterModule.forRoot(routes);
8
  • при каких обстоятельствах возникает ошибка? потому что в данный момент это гадание на кофейной гуще, я установил у себя - 0 ошибок 29 окт 2018 в 8:00
  • Возникает ошибка при подгрузке представления компонента с данным тегом. <pdf-viewer [src]="pdfSrc" [render-text]="true" style="display: block"></pdf-viewer> В компоненте pdfSrc присвоена эта ссылка: vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf Так же при загрузке перед этой ошибкой получаю: GET vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf net::ERR_BLOCKED_BY_CLIENT Но эти ошибки, на сколько мне известно никак не связаны между собой. 29 окт 2018 в 8:06
  • https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf вот рабочая ссылка 29 окт 2018 в 8:56
  • @overthesanity , получаю ту же ошибку.) Можно как-то отдебажить или отследить источник? Полный стек трейс в шапке темы. 29 окт 2018 в 9:33
  • лучше бы вы приложили скриншоты кода и браузера с консолью открытой 29 окт 2018 в 13:02

1 ответ 1

1

Решено

AdBlock блокировал подгрузку PDF файла.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.