关于函数导入
1.在untils写一个pdfService.js 关于pdf预览和下载的方法
export const previewPdf = async (record) => {const pdfUrln = record.url; // 直接使用 PDF 文件的 URL// const pdfUrln = indexConfig.VITE_GLOB_VIEW_URL + 'static/pdf/web/viewer.html?file=' + record.url;uni.downloadFile({url: pdfUrln,success: function(res) {if (res.statusCode === 200) {console.log('文件下载成功', res);let filePath = res.tempFilePath; // 确认文件路径uni.openDocument({filePath: filePath,fileType: 'pdf', // 明确指定为pdf文件success: function(res) {console.log("文档打开成功");},fail: function(res) {console.error("文档打开失败", res);}});} else {console.error('文件下载失败，状态码：', res.statusCode);}},fail: function(err) {console.error('文件下载失败', err);}});
};export const downloadPdf = async (record) => {uni.showLoading({title: '文件下载中...',});// 使用微信小程序专用 APIwx.downloadFile({url: record.url, // 这里需要是 HTTPS 地址success(res) {if (res.statusCode === 200) {console.log('文件下载成功，文件路径:', res.tempFilePath);uni.showModal({title: '提示',content: '文件下载成功，是否打开？',success: function(modalRes) {if (modalRes.confirm) {wx.openDocument({filePath: res.tempFilePath,showMenu: true, // 支持右上角菜单fileType: 'pdf', // 指定文件类型为 pdfsuccess() {console.log('文档打开成功');},fail(err) {console.log('打开文档失败', err);}});}}});} else {console.log('文件下载失败，状态码:', res.statusCode);}},fail(err) {uni.hideLoading();console.log('文件下载失败', err);},complete() {uni.hideLoading();}});
};2.引用
import { previewPdf,downloadPdf } from '@/utils/pdfService';<u-modal :show="showFile" :title="getTitle" @confirm="confirm" @cancel="cancel" :asyncClose="true":showCancelButton="true" :closeOnClickOverlay="true" width="590rpx"><view class="slot-content"><uni-table ref="table" border stripe emptyText="暂无更多数据"><!-- 表头行 --><uni-tr class="custom-header"><uni-th align="center">附件名称</uni-th><uni-th align="center">操作</uni-th></uni-tr><!-- 表格数据行 --><uni-tr v-for="(item, index) in fileList" :key="index"><uni-td align="center">{{ item.fileName }}</uni-td><uni-td width="300rpx" align="center"><a @click="previewPdf(item)">预览</a><a @click="downloadPdf(item)">下载</a></uni-td></uni-tr></uni-table></view></u-modal>问题来了 报错 说我没注册 也就是说在methods里面 还要写函数
previewPdf(record) {previewPdf(record)},
downloadPdf(record) {downloadPdf(record)},这样子要写两遍 太麻烦了
于是有
第二种
在utils里面新建目录mixin 封装，组件中通过 Mixin 的方式使用，而不是每次都手动导入和定义方法
// utils/PdfMixin.js
export const PdfMixin = {methods: {previewPdf(record) {const pdfUrl = record.url;uni.downloadFile({url: pdfUrl,success: function (res) {if (res.statusCode === 200) {let filePath = res.tempFilePath;uni.openDocument({filePath: filePath,fileType: 'pdf',success: function () {console.log("文档打开成功");},fail: function (res) {console.error("文档打开失败", res);},});} else {console.error("文件下载失败，状态码：", res.statusCode);}},fail: function (err) {console.error("文件下载失败", err);},});},downloadPdf(record) {uni.showLoading({title: "文件下载中...",});wx.downloadFile({url: record.url,success(res) {if (res.statusCode === 200) {uni.showModal({title: "提示",content: "文件下载成功，是否打开？",success: function (modalRes) {if (modalRes.confirm) {wx.openDocument({filePath: res.tempFilePath,showMenu: true,fileType: 'pdf',success() {console.log("文档打开成功");},fail(err) {console.log("打开文档失败", err);},});}},});} else {console.log("文件下载失败，状态码:", res.statusCode);}},fail(err) {uni.hideLoading();console.log("文件下载失败", err);},complete() {uni.hideLoading();},});},},
};
引入
import {PdfMixin} from '@/utils/mixin/pdfMixin';注册
mixins: [PdfMixin], // 引入 Mixin可以了
