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 중국어 웹사이트의 기타 관련 기사를 참조하세요!