반응이 PDF 생성 정보를 표시하지 않으면 어떻게 해야 합니까?

PDF 생성 정보를 표시하지 않는 React에 대한 솔루션: 1. 백그라운드에서 PDF의 URL 주소를 얻은 다음 PDF 파일을 요청합니다. 2. PDF 파일을 요청할 때 responseType을 blob으로 설정합니다. base64 형식으로 4. 캔버스를 사용하여 PDF를 표시합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

React가 PDF 생성 정보를 표시하지 않으면 어떻게 해야 하나요?

반응 프로젝트에서 PDF 표시 및 인쇄 문제 해결

최근 프로젝트에는 다음과 같은 요구 사항이 있습니다.

• PDF를 페이지에 표시할 수 있습니다

• 하고 싶지 않습니다 전체 페이지 인쇄, PDF만 인쇄 및 표시 해당 부분은 브라우저에 내장된 인쇄 기능을 사용할 수 있습니다

PDF 파일 표시

이 요구 사항을 받았을 때 정말 혼란스러웠습니다. 비슷한 일을 해본 적이 없어서 어디서부터 시작해야 할지 모르겠습니다. 정보를 확인하는 과정에서 PDF를 표시할 수 있는 jQuery 플러그인이 많이 있다는 것을 발견했지만, 우리는 React 단일 페이지 애플리케이션 프로젝트이므로 이러한 플러그인은 적합하지 않은 것 같고 다른 플러그인만 찾을 수 있습니다. 행동 양식.

나중에 npmjs.com에서 React-pdf-js 구성 요소를 발견하고 PDF를 표시하는 것이 가능하다고 생각했습니다. cnpm install React-pdf-js --save-dev 명령을 통해 프로젝트에 React-pdf-js 종속성을 설치하고 'react-pdf-js'에서 PDF 가져오기를 통해 프로젝트에 도입하고 싶습니다. . f73e22e5f1b35afbd2432f86384ddfdd를 렌더링에 삽입합니다.

디버깅 과정에서 정적 PDF 파일은 표시할 수 있지만 온라인 PDF 파일은 표시할 수 없다는 것을 발견했습니다. 제어 오류 메시지를 통해 우리는 React-pdf-js 구성 요소가 URL 또는 base64 형식의 파일 주소를 요구한다는 것을 알고 있습니다. URL이 작동하지 않기 때문에 base64에만 의존할 수 있습니다.

PDF 파일 받기

처음에는 PDF의 온라인 주소 URL을 직접 base64로 변환했는데 표시가 되지 않더군요. 나중에 나는 URL을 base64 형식으로 변환하는 것이 쓸모가 없다는 것을 알았습니다. pdf 파일 내용을 base64로 변환해야 합니다. 다음으로, 백그라운드에서 얻은 pdf의 URL 주소를 통해 pdf 파일을 다시 요청하는 것이 논리적입니다.

이 부분을 수행할 때 작은 문제가 발생했습니다. 요청은 성공적이었지만 PDF 파일을 얻을 수 없었습니다. 이 문제로 오랫동안 어려움을 겪었고 해결 방법을 몰랐습니다. 회사의 설계자와 우리는 그것이 교차 도메인 문제로 인해 발생했다고 분석했습니다. 그는 교차 도메인 문제를 해결하기 위해 nginx 서버를 구성했습니다.

'Content-Type':  'application/x-www-form-urlencoded;charset=utf-8',
'Access-Control-Allow-Origin': 'https://www.nurse-go.cn:9091',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'X-Custom-Header',
'Access-Control-Allow-Credentials': true,

PDF 파일을 base64 형식으로 변환

base64는 모든 형식의 파일을 저장할 수 있는 훌륭한 저장 방법입니다. 파일을 base64 형식으로 변환합니다.

여기서 주의할 점은 pdf 파일을 요청할 때 responseType을 blob으로 설정해야 한다는 점입니다. blob 유형을 사용하는 이유는 아래에서 설명하겠습니다. 이때 pdf 파일을 받아 base64 형식으로 변환했습니다.

let reader  = new FileReader()
let fileParts = []
fileParts.push(this.props.pdfFile)
let blob = new Blob(fileParts, {type : 'application/pdf'})
if (blob) {
    reader.readAsDataURL(blob)
}
let base64
let that = this      // 处理this的指向  
reader.addEventListener("load", function () {
    base64 = reader.result
   that.setState({
          base64: base64,
 })
}, false);

base64 형식 변환, 필요한 경우 blob 형식이 base64 형식 pdf로 변환되고 file={file} 형식으로 브라우저에 표시됩니다. 실제로 이는 궁극적으로 캔버스에 표시되는 PDF입니다.

PDF 표시가 끝났고 다음 단계는 인쇄입니다.

PDF 파일 인쇄

브라우저에서 인쇄는 전체 페이지 인쇄와 지정 부분 인쇄로 구분됩니다. 프로젝트는 콘텐츠의 일부를 인쇄해야 합니다. 저는 전통적인 CSS 컨트롤을 사용했습니다. @media print를 사용하여 인쇄할 필요가 없는 부분을 숨기고 나머지 부분을 인쇄해야 합니다.

PDF 파일 인쇄 디버깅

여기에 약간의 디버깅 팁이 있습니다. @media print의 스타일은 브라우저의 인쇄가 호출될 때만 호출되므로 이 스타일 부분을 필요한 부분은 외부에 배치할 수 있습니다. 그런 다음 외부 스타일을 제거하고 @media로 인쇄합니다.

window.print()는 브라우저의 인쇄를 호출하는 데 사용됩니다. 모든 브라우저와 호환되지는 않지만 일반적인 고급 브라우저는 호환되므로 여기서는 더 자세히 설명하지 않겠습니다.

PDF 표시 및 인쇄에 문제가 많이 발생합니다. 다음은 요약입니다.

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응이 PDF 생성 정보를 표시하지 않으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!