recherche

Maison >interface Web >js tutoriel >uniapp Prise en main Pratique Exporter la page front-end en pdf

uniapp Prise en main Pratique Exporter la page front-end en pdf

Patricia Arquette
Patricia Arquetteoriginal
2024-11-09 02:42:01751parcourir

arrière-plan

Le produit nécessite que les mini-programmes et les sites Web de l'entreprise exportent les détails du produit au format PDF, donc aujourd'hui, je réfléchis à la façon d'exporter la page frontale au format PDF

Réalisez l'effet

uniapp 入门实战 将前端页面导出成pdf

Site web

Rappel : Veuillez modifier vous-même l'adresse de l'image de code suivante.

  • démo : dans l'ensemble, c'est très simple, utilisez simplement html2canvas pour convertir le dom en images, puis ajoutez des images à jsPDF, puis enregistrez-le. 
  <!DOCTYPE html>
  <html lang="en">

  <head>
   <meta charset="UTF-8" />
   <title>title</title>
   <style>
    .btn {
     width: 300px;
     height: 100px;
    }

    img {
     width: 100%;
     object-fit: cover;
    }
   </style>
   <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
   <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  </head>

  <body>
   <button type="button"
      >



<h2>
  
  
  微信小程序
</h2>

<blockquote>
<p>说明：公司小程序项目是用的uniapp开发的</p>
</blockquote>

<h3>
  
  
  方法1：通过wx.miniProgram.postMessage将pdf数据传给小程序
</h3>

<blockquote>
<p>提醒：以下代码图片地址，请自行修改一下。</p>
</blockquote>
  • h5 webview页面 
  <!DOCTYPE html>
  <html lang="en">

  <head>
   <meta charset="UTF-8" />
   <title>title</title>
   <style>
    .btn {
     width: 300px;
     height: 100px;
    }

    img {
     width: 100%;
     object-fit: cover;
    }
   </style>
   <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
   <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  </head>

  <body>
   <button type="button"
      >



<ul>
<li>uniapp 页面代码</li>
</ul>

<blockquote>
<p>特别提醒：请将页面部署至自己的服务器下，然后修改一下地址，然后在小程序后台把部署的域名配置到web合法域名列表下，不然webview无法加载页面<br>
</p>
</blockquote>

<pre class="brush:php;toolbar:false">  <template>
   <PageLayout>
    <web-view src="https://xxx.com/pdf_test.html"
         @message="handleGetMessage"></web-view>
   </PageLayout>
  </template>

  <script>
  export default {
   data() {
    return {
     imageData: "",
    }
   },
   methods: {
    handleGetMessage(e) {
     console.log("收到webview消息:", e)
     this.imageData = e.detail.data[0].imageData
     console.log("收到webview消息: imageData=", this.imageData);
     const base64 = this.imageData.split("base64,")[1]
     console.log("收到webview消息: path=", base64);
     this.download(base64)
    },
    async download(base64) {
     base64 = base64.replace(/[\r\n]/g, "");
     const fs = wx.getFileSystemManager();
     const buffer = wx.base64ToArrayBuffer(base64);
     const filePath = wx.env.USER_DATA_PATH + "/" + Date.now() + ".pdf"
     fs.writeFile({
      filePath,
      data: buffer,
      success(res) {
       uni.openDocument({
        showMenu: true,
        fileType: "pdf",
        filePath,
        success: function (res) {
         console.log("打开文档成功")
        }
       })
      },
      fail(err) {
       console.log("错误", err)
      }
     })
    },
   },
   onLoad(e) {

   }
  }

  </script>

  <style scoped></style>

Méthode 2 : transférer les données via le backend, puis transmettre les paramètres via la navigation (la dernière alternative)

Remarque supplémentaire : si vous rencontrez h5 envoyant un message via wx.miniProgram.postMessage, le mini programme ne pourra pas rechercher le message, et le retour et le partage seront inutiles. Solution : vous pouvez enregistrer les données sur le backend, puis transmettre les paramètres à l'applet via la navigation, puis télécharger le pdf. Les codes spécifiques sont répertoriés ici, parlons brièvement des idées

  1. Transmettez le pdf exporté par h5 au backend, puis retournez un identifiant
  2. Par wx.miniProgram.navigateTo({url: ‘/pages/xx/xx?id=234’})
  3. Ensuite, après avoir obtenu les paramètres de l'option dans le rappel onLoad de chargement de la page xx, vérifiez le backend pour obtenir le pdf

Résumer

  • Lors du déploiement d'une page WebView, vous devez configurer un nom de domaine légal en arrière-plan du mini-programme, sinon certaines pages WebView se chargeront normalement
  • Pour les images utilisées dans les pages Web, les noms de domaine correspondants doivent également être configurés en arrière-plan du mini-programme et configurés dans la demande de liste de noms de domaine légaux, sinon les images risquent de ne pas être chargées
  • Il y a 2 pièges dans le mini programme Attention à ne pas tomber dans le gouffre.
    1. La fonction de la vue Web Uniapp pour surveiller le post-message est un message, et la méthode de surveillance dans l'applet WeChat est un message de liaison (remarque : ne vous trompez pas)
    2. PostMessage ne répond pas immédiatement après son envoi, mais n'est déclenché qu'à des moments précis (retour, destruction de composants, déclencheur de partage et réception du message)

Références

  • uniapp implémente la conversion des pages en pdf (petit programme, app, h5)
  • vue Web
  • À propos des pièges du passage de h5 aux mini-programmes
  • https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html JS dom webview 微信小程序 https
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment garantir l’ordre d’exécution des événements dans jQuery ?Article suivant：Comment garantir l’ordre d’exécution des événements dans jQuery ?

Articles Liés

Voir plus