cari

Rumah >hujung hadapan web >tutorial js >uniapp Bermula Praktikal Eksport halaman hadapan ke pdf

uniapp Bermula Praktikal Eksport halaman hadapan ke pdf

Patricia Arquette
Patricia Arquetteasal
2024-11-09 02:42:01751semak imbas

latar belakang

Produk tersebut memerlukan program mini dan tapak web syarikat perlu mengeksport butiran produk ke dalam pdf, jadi hari ini saya sedang memikirkan cara untuk mengeksport halaman hadapan ke dalam pdf

Sedar kesannya

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

laman web

Peringatan: Sila ubah suai alamat imej kod berikut sendiri.

  • demo: Secara keseluruhannya sangat mudah, hanya gunakan html2canvas untuk menukar dom kepada gambar, kemudian tambahkan gambar pada jsPDF, dan kemudian simpannya. 
  <!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>

Kaedah 2: Pindahkan data melalui bahagian belakang, dan kemudian lulus parameter melalui navigasi (alternatif terakhir)

Nota tambahan: Jika anda menemui h5 menghantar mesej melalui wx.miniProgram.postMessage, program mini tidak akan dapat mencari mesej tersebut dan pemulangan dan perkongsian akan menjadi sia-sia. Penyelesaian: Anda boleh menyimpan data ke bahagian belakang, kemudian hantar parameter ke applet melalui navigasi, dan kemudian muat turun pdf. Kod khusus disenaraikan di sini, mari kita bincangkan secara ringkas tentang idea

  1. Lulus pdf yang dieksport oleh h5 ke bahagian belakang, dan kemudian kembalikan id
  2. Oleh wx.miniProgram.navigateTo({url: ‘/pages/xx/xx?id=234’})
  3. Kemudian selepas mendapat parameter daripada pilihan dalam panggilan balik onLoad untuk memuatkan halaman xx, semak bahagian belakang untuk mendapatkan pdf

ringkaskan

  • Apabila menggunakan halaman paparan web, anda perlu mengkonfigurasi nama domain yang sah dalam latar belakang program mini, jika tidak, sesetengah halaman paparan web akan dimuatkan seperti biasa
  • Untuk imej yang digunakan dalam halaman web, nama domain yang sepadan juga mesti dikonfigurasikan dalam latar belakang program mini dan dikonfigurasikan ke dalam senarai permintaan nama domain yang sah, jika tidak, imej mungkin tidak dimuatkan
  • Terdapat 2 perangkap dalam program mini Berhati-hati agar tidak jatuh ke dalam lubang.
    1. Fungsi pandangan web uniapp untuk memantau postmessage ialah mesej, dan kaedah pemantauan dalam applet WeChat ialah bindmessage (nota: jangan buat kesilapan)
    2. PostMessage tidak bertindak balas serta-merta selepas dihantar, tetapi hanya dicetuskan pada masa tertentu (kembali, pemusnahan komponen, pencetus perkongsian dan resit mesej)

Rujukan

  • uniapp melaksanakan penukaran halaman kepada pdf (program kecil, aplikasi, h5)
  • pandangan web
  • Mengenai perangkap h5 melompat ke program mini
  • https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

Atas ialah kandungan terperinci uniapp Bermula Praktikal Eksport halaman hadapan ke pdf. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html JS dom webview 微信小程序 https
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk Memastikan Perintah Pelaksanaan Acara dalam jQuery?Artikel seterusnya：Bagaimana untuk Memastikan Perintah Pelaksanaan Acara dalam jQuery?

Artikel berkaitan

Lihat lagi