온라인 미리 보기 PDF 를 실현 하 는 몇 가지 해결 방법 에 대하 여 말씀 드 리 겠 습 니 다.

고객 이 PDF 의 미리 보기 처 리 를 실현 해 야 하기 때문에 인터넷 에서 PDF 온라인 미리 보기 솔 루 션 을 찾 았 습 니 다.어떤 것 은 PDF JS 의 온라인 미리 보기 방식 을 사용 하고 어떤 것 은 PDF object 의 내장 형 디 스 플레이 를 사용 하 며 어떤 것 은 JPG/PNG 방식 으로 간접 적 으로 표시 하 는 방식 을 바 꾸 었 습 니 다.처음에는 간단 한 방식 으로 JS 플러그 인 을 사용 하여 미리 보 기 를 하 는 것 이 가장 좋 습 니 다.그러나 온라인 미리 보 기 는 항상 부족 합 니 다.예 를 들 어 브 라 우 저의 호환성 문제,심지어 서로 다른 모 바 일 플랫폼 에서 보 여 주 는 효과 도 다 르 지만 간접 적 인 방식 으로 PDF 를 이미지 전시 효과 로 전환 하여 고객 의 요 구 를 달성 하 는 것 이 좋 습 니 다.
1.온라인 으로 미리 보 기 를 실현 하 는 방식
처음에 저 는 이런 방식 을 사용 하 는 경향 이 있 었 습 니 다.비교적 좋 은 JS 플러그 인 방식 으로 PDF 의 온라인 미리 보기(웹 미리 보기)를 실현 하고 싶 었 습 니 다.그래서 Github 에서 순위 가 비교적 높 은 PDF 플러그 인 을 찾 았 습 니 다.

순위 가 높 은 것 을 보면 사용 하 는 것 이 좋 을 것 같 습 니 다.가 져 온 PDF 파일 을 보면 효과 가 좋 습 니 다.

그러나 고객 의 요 구 는 정상 적 인 영수증 PDF 파일 을 표시 하고 파일 주 소 를 바 꾸 는 것 입 니 다.일부 정 보 는 표시 되 지 않 습 니 다.해결 방법 을 보지 못 해서 효과 가 기준 에 미 치지 못 했 습 니 다.

기본 영수증 도 표시 되 지 않 으 면 영수증 PDF 파일 을 표시 할 수 없습니다.
마지막 으로 PDFObject(https://pdfobject.com/)를 사용 하여 온라인 으로 PDF 디 스 플레이 를 삽입 하 는 방식 을 테스트 했 습 니 다.이 JS 플러그 인 도 괜 찮 습 니 다.GitHub 에서 도 찾 을 수 있 습 니 다.
그것 의 사용 도 매우 간단 하 다.아래 코드 와 같다.

PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");
미리 보기 창의 크기 를 설정 하려 면 스타일 을 설정 하면 됩 니 다.

<style>
.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }
</style>

표시 효 과 는 정상 이 었 지만 애플 폰 에서 Safari 브 라 우 저 를 켜 보 니 제대로 표시 되 지 않 았 습 니 다.

따라서 미리 보기 표시 에 도 사용 할 수 없습니다.
실제 테스트 에서 안 드 로 이 드 폰 의 브 라 우 저 는 미리 보기 PDF 에 대해 서도 지원 이 다 르 고,일 부 는 직접 PDF 를 다운로드 하 며 미리 보기 표 시 를 지원 하지 않 는 것 으로 나 타 났 다.
이러한 문 제 를 피하 기 위해 서 는 PDF 를 그림 으로 변환 하여 표시 하 는 절 충 된 방안 을 찾 는 것 이 좋 습 니 다.그림 은 서로 다른 브 라 우 저 에 표시 되 지만 문제 가 없습니다.
2,PDF 변환 그림 표시
PDF 를 그림 으로 바 꾸 는 것 도 많은 컨트롤 처리 가 있 습 니 다.예 를 들 어 Aspose.Pdf,Spire.Pdf,Pdfiumviewer 등 은 서로 다른 제3자 라 이브 러 리 에서 사용 하 는 방법 에 차이 가 있 지만 사고 방향 은 모두 비슷 합 니 다.
원래 Aspose.Pdf 를 사용 하 는 경향 이 있 었 으 나,변 경 된 영수증 정보 가 일부 중국어 문자 나 코드 가 부족 하여 정상적으로 표시 되 지 않 는 것 을 발견 하 였 다.
나중에 Spire.Pdf 버 전과 해당 하 는 녹색 버 전 을 찾 아 정확 한 형식 으로 바 꿀 수 있 었 기 때문에 이 제3자 컨트롤 을 사용 하여 그림 을 바 꾸 었 습 니 다.
온라인 미리 보기 에 대해 서 는 PDF 미리 보기 파일 을 처음 요청 할 때 해당 하 는 그림 파일 을 만 들 고 그 다음 에 바로 경 로 를 되 돌려 주면 됩 니 다.
실 현 된 미리 보기 효 과 는 다음 과 같다.

asp.net MVC 프로젝트 에 표 시 된 것 이기 때문에 컨트롤 러 의 처리 논 리 를 수정 하고 그림 의 생 성 을 판단 처리 하면 됩 니 다.
컨트롤 러 백 엔 드 의 실현 코드 는 다음 과 같다.

        //      PDF       ，
        //   jpg       ID
        string pdfjpgPath = string.Format("/GenerateFiles/pdf/{0}.jpg", info.ID);
        string pdfjpg = Server.MapPath(pdfjpgPath);

        //PDF    ，      
        string pdfPath = @"/Content/Template/fapiao.pdf";
        string pdfRealPath = Server.MapPath(pdfPath);

        //     ，   ，          
        if(!FileUtil.IsExistFile(pdfjpg))
        {          
          //  
          ModifyInMemory_Spire.ActivateMemoryPatching();
          PdfDocument doc = new PdfDocument(pdfRealPath);
          var image = doc.SaveAsImage(0, Spire.Pdf.Graphics.PdfImageType.Bitmap, 300, 300);
          FileUtil.BytesToFile(ImageHelper.ImageToBytes(image), pdfjpg);
        }
        //      
        info.SavePath = pdfjpgPath;//            

마지막 으로 해당 하 는 제 이 슨 정 보 를 되 돌려 주시 면 됩 니 다.

        //         
        string result = JsonConvert.SerializeObject(info, Formatting.Indented);
        return Content(result);

우 리 는 페이지 보기에 서 ajax 요청 처 리 를 통 해 그림 의 동적 표 시 를 실현 할 수 있 습 니 다.

    //    
  var ID = '';
  function Refresh() {
    var filename = $("#WHC_FileName").val();
    //        PDF  ，      
    $.getJSON("/PdfView/FindByFileName?r=" + Math.random() + "&name=" + filename, function (info) {
      if (info != '') {
        //      ，    
        $("#imgfapiao").attr("src", info.SavePath);
      }
    });
  }

마지막 으로 그림 의 미리 보 기 를 실현 했다.

위 는 바로 제 해결 방향 입 니 다.만약 에 PDF 온라인 미리 보기 문 제 를 해결 하 는 더 좋 은 방법 이 있다 면 서로 교류 하 는 것 을 환영 합 니 다.여러분 께 참고 가 되 셨 으 면 좋 겠 고 많은 응원 부 탁 드 리 겠 습 니 다.