La nueva forma de obtener una vista previa del PDF que desea, el subprograma WeChat es absolutamente imperdible

prefacio

Con el continuo desarrollo y transformación de WeChat Mini Programs, se han desarrollado más y más funciones, y la función de vista previa de archivos PDF se ha convertido en una de las aplicaciones comunes de Mini Programs. Hoy, veremos una vista previa de la función PDF para el subprograma WeChat , la analizaremos y la presentaremos en detalle.

---

Ideas de implementación

1. Agregue un botón en la interfaz del applet y vincúlelo con un evento de clic;
2. Llame wx.downloadFileal método y especifique la pdfruta urlde que se va a descargar;
3. Una vez completada la descarga, llame wx.openDocumental método para abrir la vista previa del archivo. Al llamar a este método, se debe pasar la ruta del archivo previamente almacenado.

Nota: Debido a las restricciones de seguridad del subprograma WeChat, se debe llamar wx.downloadFileal método descargar el archivo antes de que se pueda abrir en el subprograma.

---

wx.downloadFile(Objeto objeto)

parámetro

parámetro	tipo	¿Es obligatorio?	ilustrar
URL	cadena	Sí	URL para descargar el recurso
encabezamiento	Objeto	No	El encabezado de la solicitud HTTP, el Referer no se puede configurar en el encabezado
se acabó el tiempo	número	No	tiempo de espera, en milisegundos
ruta de archivo	cadena	No	Especifique la ruta donde se almacena el archivo después de la descarga (ruta local)
éxito	función	No	Función de devolución de llamada para una llamada de interfaz exitosa
fallar	función	No	Función de devolución de llamada para falla de llamada de interfaz
completo	función	No	La función de devolución de llamada del final de la llamada de interfaz (la llamada se ejecutará con éxito o fallará)

ejemplo

wx.downloadFile({
    
    
  url: 'https://example.com/audio/123', //仅为示例，并非真实的资源
  success (res) {
    
    
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    if (res.statusCode === 200) {
    
    
      wx.playVoice({
    
    
        filePath: res.tempFilePath
      })
    }
  }
})

Puede hacer clic aquí para ver la información completa del documento de este método .

---

wx.openDocument(Objeto objeto)

parámetro

parámetro	tipo	¿Es obligatorio?	ilustrar
ruta de archivo	cadena	Sí	Ruta del archivo (ruta local), que se puede obtener a través de downloadFile
Muestrame el menu	booleano	No	El valor predeterminado es falso, ya sea para mostrar el menú de la esquina superior derecha
Tipo de archivo	cadena	No	tipo de archivo, especifique el tipo de archivo para abrir el archivo
éxito	función	No	Función de devolución de llamada para una llamada de interfaz exitosa
fallar	función	No	Función de devolución de llamada para falla de llamada de interfaz
completo	función	No	La función de devolución de llamada del final de la llamada de interfaz (la llamada se ejecutará con éxito o fallará)

ejemplo

wx.downloadFile({
    
    
  // 示例 url，并非真实存在
  url: 'http://example.com/somefile.pdf',
  success: function (res) {
    
    
    const filePath = res.tempFilePath
    wx.openDocument({
    
    
      filePath: filePath,
      success: function (res) {
    
    
        console.log('打开文档成功')
      }
    })
  }
})

Puede hacer clic aquí para ver la información completa del documento de este método .

---

práctica

Al ver esto, creo que todos tienen una cierta comprensión de estos dos métodos. A continuación, usamos directamente un ejemplo más completo para ayudarlo a usar mejor este método para realizar la función de pdfvista previa No hay mucho que decir, veamos directamente el código a continuación.

archivo wxml

<view>
	<button bindtap="itemPdfOn" type="primary">点我预览</button>
</view>

archivo js

Page({
    
    
    // 查看pdf事件方法  
    itemPdfOn() {
    
    
        wx.showLoading({
    
    
            title: '加载中',
        })
        // 下载文件方法
        wx.downloadFile({
    
    
            url: 'https://s30.aconvert.com/convert/p3r68-cdx67/ah4fu-1s24x.pdf',
            success: function (res) {
    
    
                var Path = res.tempFilePath //返回的文件临时地址，用于后面打开本地预览所用
                wx.openDocument({
    
    
                    filePath: Path,
                    success: function () {
    
    
                        console.log("打开文档成功");
                        wx.hideLoading()
                    }
                })
            },
            fail: function (res) {
    
    
                console.log(res);
            }
        })
    },
})

---

lograr efecto