pdf查看问题调试

src/app/common/pipe/safe-resource-url.pipe.spec.ts

+import { SafeResourceUrlPipe } from './safe-resource-url.pipe';
+
+describe('SafeResourceUrlPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SafeResourceUrlPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/common/pipe/safe-resource-url.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeResourceUrl'
+})
+export class SafeResourceUrlPipe implements PipeTransform {
+  constructor(private sanitized:DomSanitizer){}
+  transform(value: any, args?: any): any {
+    return this.sanitized.bypassSecurityTrustResourceUrl(value);
+  }
+
+}
+

src/app/common/video/video.component.html

-<video [src]="videoSrc" controls="controls" width="100%"  preload="auto" x5-playsinline="" playsinline="" webkit-playsinline="" >
+<video *ngIf="!pdfPath" [src]="videoSrc" controls="controls" width="100%"  preload="auto" x5-playsinline="" playsinline="" webkit-playsinline="" >
   您的浏览器不支持 video 标签。
-  </video>
\ No newline at end of file
+  </video>
+
+  <iframe *ngIf="pdfPath" [src]="pdfPath | safeResourceUrl" frameborder="0" width="100%" height="100%"></iframe>
\ No newline at end of file

src/app/common/video/video.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'ydlife-video',
@@ -7,10 +8,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class VideoComponent implements OnInit {
   videoSrc:string;
-  constructor() { }
+  pdfPath:any;
+  constructor(private activatedRoute:ActivatedRoute) { }
   
   ngOnInit() {
     this.videoSrc = sessionStorage.getItem('videoPath');
+    this.pdfPath = this.activatedRoute.snapshot.queryParams['path']
   }
 
+
 }

src/app/my/file-upload/file-upload.component.html

@@ -19,7 +19,7 @@
             <i class="iconfont icon-xiazai" style="margin-right: 0;"></i>
           </div>
         </a>
-        <a href="assets/pdfjs/web/viewer.html?file={{fileUploadItem.filePath}}" target="_blank" *ngIf="!judgmentFile(fileUploadItem.filePath) && judgmentFile(fileUploadItem.filePath,'pdf')">
+        <a href="javascript:;" (click)="viewPdf(fileUploadItem.filePath)" *ngIf="!judgmentFile(fileUploadItem.filePath) && judgmentFile(fileUploadItem.filePath,'pdf')">
           <div style="overflow-x: hidden; white-space: nowrap;text-overflow: ellipsis;">
             <i class="iconfont icon-pdf"></i>
             <span title="{{fileUploadItem.itemName}}">{{fileUploadItem.itemName}}</span>

src/app/my/file-upload/file-upload.component.ts

 import { Component, OnInit } from '@angular/core';
 import { MyService } from "../my.service";
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 
 @Component({
   selector: 'ydlife-file-upload',
@@ -14,7 +14,11 @@ export class FileUploadComponent implements OnInit {
   categoryList: Array<any>;
   selectedCategoryId: any;
   fileUploadType:any;
-  constructor(private myService: MyService, private activatedRoute: ActivatedRoute) {
+  constructor(private myService: MyService, private activatedRoute: ActivatedRoute,private router:Router) {
+  }
+
+  viewPdf(p){
+    this.router.navigate(['/pdfView'],{queryParams:{path:`assets/pdfjs/web/viewer.html?file=${p}`}})
   }
   setVideoPath(p){
     sessionStorage.setItem('videoPath',p);

src/app/my/my-routing.module.ts

@@ -173,6 +173,7 @@ const myRoutes: Routes = [
   { path: 'integration_detail',component:IntegrationDetailComponent,canActivate:[AuthGuard],data:{title: '积分明细'}},
   { path: 'integration_rule',component:IntegrationRuleComponent,canActivate:[AuthGuard],data:{tttle: '积分规则'}},
   { path: 'video',component:VideoComponent,canActivate:[AuthGuard],data:{ttitle: '视频播放'}},
+  { path: 'pdfView',component:VideoComponent,canActivate:[AuthGuard],data:{ttitle: 'PDF查看'}},
 
 ];
 

src/app/my/my-setting-detail/my-setting-detail.component.ts

@@ -3,7 +3,6 @@ import { MyService } from '../my.service';
 import { ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { SettingInfo } from '../../domain/settinginfo';
-import { DomSanitizer } from '@angular/platform-browser';
 declare const wx: any;
 @Component({
   selector: 'ydlife-my-setting-detail',

src/app/my/my.module.ts

@@ -25,6 +25,7 @@ import { MyNewsComponent } from './my-news/my-news.component';
 import { MyTargetComponent } from './my-target/my-target.component';
 import { TeamPanelComponent } from './team-panel/team-panel.component';
 import { SwitchNumberPipe } from '../common/pipe/switch-number.pipe';
+import { SafeResourceUrlPipe } from '../common/pipe/safe-resource-url.pipe';
 import { TeamSalesScoreComponent } from './team-sales-score/team-sales-score.component';
 import { ScoreDetailsComponent } from './score-details/score-details.component';
 import { BusinessCardComponent } from './business-card/business-card.component';
@@ -91,7 +92,7 @@ import { IntegrationRuleComponent } from './integration-rule/integration-rule.co
 import { VideoComponent } from '../common/video/video.component';
 
 @NgModule({
-  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent,DetailModalComponent, ProductComponent, ProductDataComponent, CommissionComponent, FileListComponent,MyCustomerComponent, CustomerRelationComponent, MyCustomerPolicyComponent, UnderwritingKnowledgeComponent, MyQuestionComponent, AskComponent, MenuItemComponent, MemberListComponent, ENoticeComponent, ENoticeSignComponent, RenewalReminderComponent, RenewalReminderDetailComponent, JointSalesComponent, JointSaleDetailComponent, IntegrationComponent, IntegrationDetailComponent, IntegrationRuleComponent, VideoComponent],
+  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe,SafeResourceUrlPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent,DetailModalComponent, ProductComponent, ProductDataComponent, CommissionComponent, FileListComponent,MyCustomerComponent, CustomerRelationComponent, MyCustomerPolicyComponent, UnderwritingKnowledgeComponent, MyQuestionComponent, AskComponent, MenuItemComponent, MemberListComponent, ENoticeComponent, ENoticeSignComponent, RenewalReminderComponent, RenewalReminderDetailComponent, JointSalesComponent, JointSaleDetailComponent, IntegrationComponent, IntegrationDetailComponent, IntegrationRuleComponent, VideoComponent],
   imports: [
     CommonModule,
     LifeCommonModule,

src/assets/pdfjs/web/viewer.css

@@ -2702,7 +2702,7 @@ html[dir="rtl"] #documentPropertiesOverlay .row > * {
   display: none;
 }
 
-.visibleBtn{
+.hiddenBtn{
   display: none !important;
 }
 

src/assets/pdfjs/web/viewer.html

@@ -123,19 +123,19 @@ See https://github.com/adobe-type-tools/cmap-resources
 
         <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
           <div id="secondaryToolbarButtonContainer">
-            <button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleBtn" title="切换到演示模式" tabindex="51" data-l10n-id="presentation_mode">
+            <button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode hiddenBtn" title="切换到演示模式" tabindex="51" data-l10n-id="presentation_mode">
               <span data-l10n-id="presentation_mode_label">演示模式</span>
             </button>
 
-            <button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleBtn" title="打开文件" tabindex="52" data-l10n-id="open_file">
+            <button id="secondaryOpenFile" class="secondaryToolbarButton openFile hiddenBtn" title="打开文件" tabindex="52" data-l10n-id="open_file">
               <span data-l10n-id="open_file_label">打开</span>
             </button>
 
-            <button id="secondaryPrint" class="secondaryToolbarButton print visibleBtn" title="打印" tabindex="53" data-l10n-id="print">
+            <button id="secondaryPrint" class="secondaryToolbarButton print hiddenBtn" title="打印" tabindex="53" data-l10n-id="print">
               <span data-l10n-id="print_label">打印</span>
             </button>
 
-            <button id="secondaryDownload" class="secondaryToolbarButton download visibleBtn" title="下载" tabindex="54" data-l10n-id="download">
+            <button id="secondaryDownload" class="secondaryToolbarButton download hiddenBtn" title="下载" tabindex="54" data-l10n-id="download">
               <span data-l10n-id="download_label">下载</span>
             </button>
 
@@ -229,19 +229,19 @@ See https://github.com/adobe-type-tools/cmap-resources
                 <span id="numPages" class="toolbarLabel"></span>
               </div>
               <div id="toolbarViewerRight">
-                <button id="presentationMode" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode" tabindex="31" data-l10n-id="presentation_mode">
+                <button id="presentationMode" class="toolbarButton presentationMode hiddenBtn" title="Switch to Presentation Mode" tabindex="31" data-l10n-id="presentation_mode">
                   <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
                 </button>
 
-                <button id="openFile" class="toolbarButton openFile hiddenLargeView visibleMediumView" title="Open File" tabindex="32" data-l10n-id="open_file">
+                <button id="openFile" class="toolbarButton openFile hiddenBtn" title="Open File" tabindex="32" data-l10n-id="open_file">
                   <span data-l10n-id="open_file_label">Open</span>
                 </button>
 
-                <button id="print" class="toolbarButton print hiddenMediumView visibleMediumView" title="Print" tabindex="33" data-l10n-id="print">
+                <button id="print" class="toolbarButton print hiddenBtn" title="Print" tabindex="33" data-l10n-id="print">
                   <span data-l10n-id="print_label">Print</span>
                 </button>
 
-                <button id="download" class="toolbarButton download hiddenMediumView visibleMediumView" title="Download" tabindex="34" data-l10n-id="download">
+                <button id="download" class="toolbarButton download hiddenBtn" title="Download" tabindex="34" data-l10n-id="download">
                   <span data-l10n-id="download_label">Download</span>
                 </button>
                 <a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView" title="Current view (copy or open in new window)" tabindex="35" data-l10n-id="bookmark">

src/assets/pdfjs/web/viewer.js

@@ -1566,12 +1566,15 @@ const PDFViewerApplication = {
     const queryString = document.location.search.substring(1);
     const params = (0, _ui_utils.parseQueryString)(queryString);
     isNeedDownload = params.get("isneeddownload") ? params.get("isneeddownload") : false;
+    console.log(isNeedDownload)
     if(isNeedDownload){
       let classAtr = document.getElementById('secondaryDownload').getAttribute('class');
-      let newClass = classAtr.replace('visibleBtn','');
+      let newClass = classAtr.replace('hiddenBtn','');
       document.getElementById('secondaryDownload').setAttribute('class',newClass)
     }else{
-      document.getElementById('secondaryDownload').className += ' visibleBtn';
+      document.getElementById('secondaryDownload').className += ' hiddenBtn';
+      document.getElementById('download').className += ' hiddenBtn';
+      console.log(document.getElementById('secondaryDownload').className)
     }
 
     if (metadataTitle) {
@@ -1810,7 +1813,7 @@ const PDFViewerApplication = {
 
     if (!this.pdfViewer.pageViewsReady) {
       this.l10n.get("printing_not_ready").then(msg => {
-        window.alert(msg);
+        window.console.error(msg);
       });
       return;
     }

src/index.html

@@ -65,6 +65,10 @@
       </div>
     </div>
   </div>
+  <!-- 移动端调试 -->
+  <!-- <script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script>
+  <script>eruda.init();</script> -->
+
   <script src="./assets/js/jquery.min.js"></script>
   <script src="./assets/js/qrcode.js"></script>
   <!--<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>-->