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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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