uniapp 시작하기 실용 프런트 엔드 페이지를 pdf로 내보내기

배경

회사의 미니 프로그램과 웹사이트에서 제품 세부 정보를 pdf로 내보내야 하는 제품인데 오늘은 프런트 엔드 페이지를 pdf로 내보내는 방법을 고민 중입니다

효과를 실현하세요

웹사이트

알림: 다음 코드 이미지 주소를 직접 수정하세요.

• 데모: 전반적으로 매우 간단합니다. html2canvas를 사용하여 dom을 그림으로 변환한 다음 jsPDF에 그림을 추가하고 저장하면 됩니다.

방법 2: 백엔드를 통해 데이터를 전송한 다음 탐색을 통해 매개변수 전달(마지막 대안)

추가 참고 사항: wx.miniProgram.postMessage를 통해 메시지를 보내는 h5를 발견하면 미니 프로그램이 메시지를 검색할 수 없으며 반환 및 공유가 쓸모 없게 됩니다. 해결 방법: 데이터를 백엔드에 저장한 다음 탐색을 통해 매개변수를 애플릿에 전달하고 PDF를 다운로드할 수 있습니다. 여기에 구체적인 코드가 나열되어 있습니다. 아이디어에 대해 간략하게 이야기해 보겠습니다.

1. h5에서 내보낸 PDF를 백엔드로 전달한 후 ID를 반환합니다
2. 작성: wx.miniProgram.navigateTo({url: '/pages/xx/xx?id=234'})
3. 그런 다음 xx 페이지를 로드하는 onLoad 콜백의 옵션에서 매개변수를 가져온 후 백엔드에서 PDF를 가져오는지 확인하세요

요약

• 웹뷰 페이지 배포 시 미니 프로그램 백그라운드에서 합법적인 도메인 이름을 구성해야 합니다. 그렇지 않으면 일부 웹뷰 페이지가 정상적으로 로드됩니다
• 웹 페이지에 사용되는 이미지의 경우 해당 도메인 이름도 미니 프로그램 배경에서 구성하고 요청 법적 도메인 이름 목록에 구성해야 합니다. 그렇지 않으면 이미지가 로드되지 않을 수 있습니다
• 미니프로그램에는 2가지 함정이 있습니다. 함정에 빠지지 않도록 주의하세요.
  1. uniapp webview의 postmessage 모니터링 기능은 message이고, WeChat 애플릿의 모니터링 방법은 binmessage입니다(참고: 착오하지 마세요)
  2. PostMessage는 전송 직후 응답하지 않고 특정 시간(뒤로, 구성 요소 파괴, 공유 트리거 및 메시지 수신)에만 트리거됩니다.

참고자료

• uniapp은 페이지를 PDF로 변환하는 기능을 구현합니다(소규모 프로그램, 앱, h5)
• 웹뷰
• H5 미니프로그램 진출의 함정에 대하여
• https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

위 내용은 uniapp 시작하기 실용 프런트 엔드 페이지를 pdf로 내보내기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!