uniapp Bermula Praktikal Eksport halaman hadapan ke pdf-tutorial js-php.cn

uniapp Bermula Praktikal Eksport halaman hadapan ke pdf

Patricia Arquette

Lepaskan： 2024-11-09 02:42:01

asal

760 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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

Lulus pdf yang dieksport oleh h5 ke bahagian belakang, dan kemudian kembalikan id
Oleh wx.miniProgram.navigateTo({url: ‘/pages/xx/xx?id=234’})
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!