js 获取 Url.Action 设置area

最新推荐文章于 2021-06-26 05:52:49 发布
最新推荐文章于 2021-06-26 05:52:49 发布
阅读量206 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/freeliver54/p/6402289.html
本文展示了如何使用ASP.NET MVC创建一个用户编辑页面，通过设置URL来指向具体的编辑功能，并通过弹窗展示URL地址。

var url = '@Url.Action("UserEdit","User",new { Area = "Setup", id = 1})';

alert(url);

转载于:https://www.cnblogs.com/freeliver54/p/6402289.html

Ext.js 4 部分基础内容学习记录
积累、分享。聚沙成塔
07-29 1628
ext.js 4
mvc4 Url.Action 访问其他 area
热门推荐
laokaizzz的专栏
06-03 1万+
 首页 其他信息
java url 访问js,如何访问@ URL.Action内JavaScript变量（）
weixin_36434922的博客
02-16 216
How can I access JavaScript value inside @URL.Action()?something like:function name(myjavascriptID){jQuery("#list_d").jqGrid('setGridParam', { url: '@URL.Action("download file", "download", new { id =...
MVC中@Url.Action方法根目录下的页面和Area下的页面如何相互访问
飞翔的学习笔记
03-01 4350
同区域下可以直接使用@Url.Action("action","controller") 跨区域或从根目录下访问区域可以使用如 @Url.Action("action","controller"，new { area="Admin"}) 从区域访问根目录下可以使用 @Url.Action("action","controller"，new { area=""}) ...
获取当前URL、area、controller、action
Jamkier's zone
06-11 582
转自：http://www.cnblogs.com/zgqys1980/archive/2012/08/01/2618152.html
Area 区域实现post提交数据的js写法.docx
01-12
在网页开发中，有时我们需要在特定的区域，如一个`Area`，实现通过JavaScript进行POST提交数据的功能。这里我们将详细探讨如何使用JavaScript的jQuery库来完成这个任务，以及相关的注意事项和常见问题。 首先，让...
Area 区域实现post提交数据的js写法
10-26
1. **URL**：这是服务器端处理请求的地址，例如`"/control/action"`，这里的`/control/action`通常对应着MVC架构中的控制器（Controller）和动作（Action）。 2. **数据对象**：一个包含键值对的对象，用来传递给...
<template> <div> <el-dialog :visible.sync="dialogVisible" width="70%" :show-close="false" :close-on-click-modal="false" append-to-body @open="handleOpen" @close="handleClose" > <template slot="title"> <div style="text-align: center; font-size: 22px;"> {{ title }} </div> </template> <el-form :model="detailForm" label-width="130px" v-loading="loading"> <el-row> <el-col :span="8"> <el-form-item label="日期："> <el-input readonly v-model="detailForm.recordDate"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="班别："> <el-input readonly v-model="detailForm.workClass"></el-input> </el-form-item> </el-col> </el-row> <el-form-item label="异常机况："> <el-table :data="eqpList" style="width: 100%" id="eqpTable"> <el-table-column prop="area" label="Area"></el-table-column> <el-table-column prop="eqpId" label="Eqp Id"></el-table-column> <el-table-column prop="eqpName" label="Eqp Name"></el-table-column> <el-table-column prop="eqpStatus" label="Eqp Status"></el-table-column> <el-table-column prop="eqpHour" label="Hour"></el-table-column> <el-table-column prop="eqpUser" label="User"></el-table-column> <el-table-column prop="comments" label="Comment"></el-table-column> </el-table> <el-input type="textarea" v-model="detailForm.abnormal" :autosize="{ minRows: 2 }" placeholder="请输入异常机况 或 选中粘贴图片" @paste="handlePaste($event, abnormalImageRef)" :readonly="!detailForm.editAuth" ></el-input> <el-upload ref="abnormalImageRef" v-model="detailForm.abnormalImageList" action="#" :http-request="handleHttpUpload" list-type="picture-card" :before-upload="beforeUpload" :on-success="() => uploadSuccess('abnormalImageList')" :on-error="uploadError" :on-remove="(file, fileList) => handleRemove('abnormalImageList', fileList)" :accept="fileType.join(',')" :on-preview="handlePreview" :disabled="!detailForm.editAuth" > <i class="el-icon-plus"></i> </el-upload> </el-form-item> <el-form-item label="产片："> <el-table :data="lotList" style="width: 100%" id="lotTable"> <el-table-column prop="eqp" label="机台"></el-table-column> <el-table-column prop="priority" label="Priority"></el-table-column> <el-table-column prop="lotId" label="Lot ID"></el-table-column> <el-table-column prop="maskTitle" label="Mask Title"></el-table-column> <el-table-column prop="dueDay" label="Due Day"></el-table-column> </el-table> <el-input type="textarea" v-model="detailForm.product" :autosize="{ minRows: 2 }" placeholder="请输入产片 或 选中粘贴图片" @paste="handlePaste($event, productImageRef)" :readonly="!detailForm.editAuth" ></el-input> <el-upload ref="productImageRef" v-model="detailForm.productImageList" action="#" :http-request="handleHttpUpload" list-type="picture-card" :before-upload="beforeUpload" :on-success="() => uploadSuccess('productImageList')" :on-error="uploadError" :on-remove="(file, fileList) => handleRemove('productImageList', fileList)" :accept="fileType.join(',')" :on-preview="handlePreview" :disabled="!detailForm.editAuth" > <i class="el-icon-plus"></i> </el-upload> </el-form-item> <el-form-item label="工程师交接事项："> <el-input type="textarea" v-model="detailForm.engHandover" :autosize="{ minRows: 2 }" placeholder="请输入工程师交接事项 或 选中粘贴图片" @paste="handlePaste($event, engHandoverImageRef)" :readonly="!detailForm.editAuth" ></el-input> <el-upload ref="engHandoverImageRef" v-model="detailForm.engHandoverImageList" action="#" :http-request="handleHttpUpload" list-type="picture-card" :before-upload="beforeUpload" :on-success="() => uploadSuccess('engHandoverImageList')" :on-error="uploadError" :accept="fileType.join(',')" :on-remove="(file, fileList) => handleRemove('engHandoverImageList', fileList)" :on-preview="handlePreview" :disabled="!detailForm.editAuth" > <i class="el-icon-plus"></i> </el-upload> </el-form-item> <el-form-item label="课长：" v-if="detailForm.managerName !== null"> <el-input v-model="detailForm.managerName" readonly></el-input> </el-form-item> <el-form-item label="接班人：" v-if="detailForm.assigneeName !== null"> <el-input type="textarea" v-model="detailForm.assigneeName" readonly autosize></el-input> </el-form-item> </el-form> <template slot="footer"> <el-button type="primary" @click="save" v-if="detailForm.editAuth">保存</el-button> <el-button @click="closeDialog">取消</el-button> <el-button type="primary" @click="submit" v-if="detailForm.submitAuth">提交</el-button> <el-button type="primary" @click="audit" v-if="detailForm.auditAuth">审核</el-button> <el-button type="primary" @click="assign" v-if="detailForm.assignAuth">签核</el-button> </template> </el-dialog> <el-dialog :visible.sync="previewVisible" :show-close="false"> <img width="100%" :src="previewImageUrl" alt="Preview Image"/> </el-dialog> </div> </template> <script> import { getJournalForEdit, saveJournal, submitJournal, auditJournal, assignJournal, clearEditUser } from '@/api/mfgLog/area'; import request from '@/utils/request'; import {Message, MessageBox } from "element-ui"; import dayjs from 'dayjs'; import { getToken } from '@/utils/auth' export default { data() { return { loading: false, dialogVisible: false, title: '光罩厂制造部站点交接记录簿', fileType: ['image/jpeg', 'image/png', 'image/gif'], abnormalImageRef: null, engHandoverImageRef: null, productImageRef: null, previewVisible: false, previewImageUrl: '', detailForm: { recordDate: '', workClass: '', workArea: '', abnormal: '', lotList: [], eqpList: [], abnormalImage: '', abnormalImageList: [], product: '', productImage: '', productImageList: [], engHandover: '', engHandoverImage: '', engHandoverImageList: [], managerName: '', assigneeName: '', editAuth: false, submitAuth: false, auditAuth: false, assignAuth: false, id: '' }, timer: null }; }, mounted() { // 监听事件以重置计时器 window.addEventListener('keydown', this.resetTimer); window.addEventListener('mousemove', this.resetTimer); window.addEventListener('mouseenter', this.resetTimer); // 浏览器关闭事件 window.addEventListener('beforeunload', (e) => { this.userInactive(); }); }, beforeDestroy() { // 清除事件监听和计时器 window.removeEventListener('keydown', this.resetTimer); window.removeEventListener('mousemove', this.resetTimer); window.removeEventListener('mouseenter', this.resetTimer); clearTimeout(this.timer); }, methods: { handleOpen() { this.resetTimer(); }, handleClose() { clearTimeout(this.timer); }, resetTimer() { // 用户进行了操作，重置计时器 if (this.timer) { clearTimeout(this.timer); } this.startTimer(); }, startTimer() { // 设置5分钟后的无操作处理 this.timer = setTimeout(() => { // 用户5分钟内无操作，执行相关逻辑 if (this.dialogVisible) { this.userInactive(); } }, 5 * 60 * 1000); }, userInactive() { // 用户处于非活跃状态的逻辑处理 if (this.detailForm.editAuth) { this.save(); } this.closeDialog(); }, showDialog(row) { this.loading = true; getJournalForEdit(row).then(res => { Object.assign(this.detailForm, res.data); // 显示提示信息 if (!this.detailForm.editAuth && !this.detailForm.assignAuth && this.detailForm.editUser) { Message.warning({ message: "当前日志正在被 " + this.detailForm.editUserName + " 编辑", position: 'top', // 确保消息显示在页面顶部 duration: 5000 // 消息显示时间为 5 秒 }); return 0; } this.detailForm.abnormalImageList = []; if (this.detailForm.abnormalImage?.length > 0) { let abnormalList = this.detailForm.abnormalImage.split(","); for (let index in abnormalList) { this.detailForm.abnormalImageList.push({ url: abnormalList[index] }); } } this.detailForm.productImageList = []; if (this.detailForm.productImage?.length > 0) { let productList = this.detailForm.productImage.split(","); for (let index in productList) { this.detailForm.productImageList.push({ url: productList[index] }); } } this.detailForm.engHandoverImageList = []; if (this.detailForm.engHandoverImage?.length > 0) { let engHandoverList = this.detailForm.engHandoverImage?.split(","); for (let index in engHandoverList) { this.detailForm.engHandoverImageList.push({ url: engHandoverList[index] }); } } this.title = "光罩厂制造部 " + this.detailForm.workArea + " 站点交接记录簿"; // 判断当前时间是否允许提交/审核日志 if (this.detailForm.submitAuth || this.detailForm.auditAuth) { // 白班18点30分之前不允许提交和审核 let authTime = this.detailForm.recordDate + " 18:30:00"; if ('N' == this.detailForm.workClass.substring(0, 1)) { // 晚班06点30分之前不允许提交和审核 authTime = dayjs(this.detailForm.recordDate).add(1, 'day').format("YYYY-MM-DD") + " 06:30:00"; } if (dayjs().isBefore(dayjs(authTime))) { this.detailForm.submitAuth = false; this.detailForm.auditAuth = false; } } // 父系统页面打开遮罩 window.parent.postMessage("open", '*'); this.dialogVisible = true; // 设置初始计时器 this.loading = false; }).catch(error => { console.log(error); this.loading = false; }); }, closeDialog() { clearEditUser({ id: this.detailForm.id }).catch(error => { Message.error(error.msg ? error.msg : error); }); this.$emit('close'); // 父系统页面关闭遮罩 window.parent.postMessage("close", '*'); this.dialogVisible = false; }, save() { this.detailForm.abnormalImage = this.detailForm.abnormalImageList.map(item => item.url).join(","); this.detailForm.productImage = this.detailForm.productImageList.map(item => item.url).join(","); this.detailForm.engHandoverImage = this.detailForm.engHandoverImageList.map(item => item.url).join(","); this.loading = true; saveJournal(this.detailForm).then(res => { this.loading = false; Message.success("保存成功"); this.closeDialog(); }).catch(error => { this.loading = false; }); }, submit() { MessageBox.confirm("确认要提交吗？", "提示", { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(res => { this.detailForm.abnormalImage = this.detailForm.abnormalImageList.map(item => item.url).join(","); this.detailForm.productImage = this.detailForm.productImageList.map(item => item.url).join(","); this.detailForm.engHandoverImage = this.detailForm.engHandoverImageList.map(item => item.url).join(","); this.loading = true; submitJournal(this.detailForm).then(res => { this.loading = false; Message.success("提交成功"); this.closeDialog(); }).catch(error => { this.loading = false; Message.error(error.msg ? error.msg : error); }); }).catch(error => { console.log(error); }); }, audit() { MessageBox.confirm("确认要提交审核吗？", "提示", { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(res => { this.detailForm.abnormalImage = this.detailForm.abnormalImageList.map(item => item.url).join(","); this.detailForm.productImage = this.detailForm.productImageList.map(item => item.url).join(","); this.detailForm.engHandoverImage = this.detailForm.engHandoverImageList.map(item => item.url).join(","); this.detailForm.lotList = this.detailForm.lotList this.detailForm.eqpList = this.detailForm.eqpList this.loading = true; auditJournal(this.detailForm).then(res => { this.loading = false; Message.success("审核成功"); this.closeDialog(); }).catch(error => { this.loading = false; Message.error(error.msg ? error.msg : error); }); }).catch(error => { console.log(error); }); }, assign() { MessageBox.confirm("确认要签核吗？", "提示", { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(res => { this.loading = true; assignJournal({ id: this.detailForm.id }).then(res => { this.loading = false; Message.success("签核成功"); this.closeDialog(); }).catch(error => { this.loading = false; Message.error(error.msg ? error.msg : error); }); }).catch(error => { console.log(error); }); }, handleHttpUpload(options) { return process.env.VUE_APP_BASE_API + '/viewException/uploadImage' }, handleRemove(listName, fileList) { console.log(listName) console.log(fileList) console.log(this.detailForm[listName]) this.detailForm[listName] = fileList; }, headers(){ return { "Authorization": 'Bearer ' + getToken() } }, beforeUpload(rawFile) { const imgType = this.fileType.includes(rawFile.type); if (!imgType) { Message.warning({ title: '温馨提示', message: '上传图片不符合所需的格式！', }); } return imgType; }, uploadSuccess(imageListName) { Message.success({ title: '温馨提示', message: '图片上传成功！', }); this.detailForm[imageListName].forEach(item => { if (item.url.indexOf("/api/") < 0) item.url = item.response.url; }); }, uploadError() { Message.error({ title: '温馨提示', message: '图片上传失败，请您重新上传！', }); }, handlePaste(event, uploadRef) { const items = (event.clipboardData || window.clipboardData).items; let file = null; if (!items || items.length === 0) { Message.error("当前浏览器不支持粘贴板"); return; } // 搜索剪切板items for (let i = 0; i < items.length; i++) { if (items[i].type.indexOf("image") !== -1) { file = items[i].getAsFile(); break; } } if (!file) { return; } uploadRef.handleStart(file); // 将粘贴过来的图片加入预上传队列 uploadRef.submit(); // 提交图片上传队列 }, handlePreview(file) { this.previewImageUrl = file.url; this.previewVisible = true; } } }; </script> <style scoped> .layout-padding-custom { padding: 20px; } .border-vxe-table { margin-top: 20px; } </style> 报错vue.runtime.esm.js:619 [Vue warn]: Property or method "eqpList" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. found in ---> <Detail> at src/views/mfgLog/area/detail.vue <Index> at src/views/mfgLog/area/index.vue <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:619 warnNonPresent @ vue.runtime.esm.js:2024 get @ vue.runtime.esm.js:2079 render @ detail.vue:110 Vue._render @ vue.runtime.esm.js:3569 updateComponent @ vue.runtime.esm.js:4081 get @ vue.runtime.esm.js:4495 Watcher @ vue.runtime.esm.js:4484 mountComponent @ vue.runtime.esm.js:4088 Vue.$mount @ vue.runtime.esm.js:8459 init @ vue.runtime.esm.js:3137 createComponent @ vue.runtime.esm.js:6022 createElm @ vue.runtime.esm.js:5969 createChildren @ vue.runtime.esm.js:6097 createElm @ vue.runtime.esm.js:5998 patch @ vue.runtime.esm.js:6521 Vue._update @ vue.runtime.esm.js:3960 updateComponent @ vue.runtime.esm.js:4081 get @ vue.runtime.esm.js:4495 Watcher @ vue.runtime.esm.js:4484 mountComponent @ vue.runtime.esm.js:4088 Vue.$mount @ vue.runtime.esm.js:8459 init @ vue.runtime.esm.js:3137 merged @ vue.runtime.esm.js:3322 createComponent @ vue.runtime.esm.js:6022 createElm @ vue.runtime.esm.js:5969 patch @ vue.runtime.esm.js:6521 Vue._update @ vue.runtime.esm.js:3960 updateComponent @ vue.runtime.esm.js:4081 get @ vue.runtime.esm.js:4495 Watcher @ vue.runtime.esm.js:4484 mountComponent @ vue.runtime.esm.js:4088 Vue.$mount @ vue.runtime.esm.js:8459 init @ vue.runtime.esm.js:3137 createComponent @ vue.runtime.esm.js:6022 createElm @ vue.runtime.esm.js:5969 patch @ vue.runtime.esm.js:6521 Vue._update @ vue.runtime.esm.js:3960 updateComponent @ vue.runtime.esm.js:4081 get @ vue.runtime.esm.js:4495 Watcher @ vue.runtime.esm.js:4484 mountComponent @ vue.runtime.esm.js:4088 Vue.$mount @ vue.runtime.esm.js:8459 init @ vue.runtime.esm.js:3137 createComponent @ vue.runtime.esm.js:6022 createElm @ vue.runtime.esm.js:5969 createChildren @ vue.runtime.esm.js:6097 createElm @ vue.runtime.esm.js:5998 patch @ vue.runtime.esm.js:6521 Vue._update @ vue.runtime.esm.js:3960 updateComponent @ vue.runtime.esm.js:4081 get @ vue.runtime.esm.js:4495 Watcher @ vue.runtime.esm.js:4484 mountComponent @ vue.runtime.esm.js:4088 Vue.$mount @ vue.runtime.esm.js:8459 init @ vue.runtime.esm.js:3137 createComponent @ vue.runtime.esm.js:6022 createElm @ vue.runtime.esm.js:5969 createChildren @ vue.runtime.esm.js:6097 createElm @ vue.runtime.esm.js:5998 createChildren @ vue.runtime.esm.js:6097 createElm @ vue.runtime.esm.js:5998 patch @ vue.runtime.esm.js:6521 Vue._update @ vue.runtime.esm.js:3960 updateComponent @ vue.runtime.esm.js:4081 get @ vue.runtime.esm.js:4495 Watcher @ vue.runtime.esm.js:4484 mountComponent @ vue.runtime.esm.js:4088 Vue.$mount @ vue.runtime.esm.js:8459 init @ vue.runtime.esm.js:3137 merged @ vue.runtime.esm.js:3322 createComponent @ vue.runtime.esm.js:6022 createElm @ vue.runtime.esm.js:5969 updateChildren @ vue.runtime.esm.js:6260 patchVnode @ vue.runtime.esm.js:6363 patch @ vue.runtime.esm.js:6526 Vue._update @ vue.runtime.esm.js:3963 updateComponent @ vue.runtime.esm.js:4081 get @ vue.runtime.esm.js:4495 run @ vue.runtime.esm.js:4570 flushSchedulerQueue @ vue.runtime.esm.js:4326 eval @ vue.runtime.esm.js:1989 flushCallbacks @ vue.runtime.esm.js:1915 Promise.then timerFunc @ vue.runtime.esm.js:1942 nextTick @ vue.runtime.esm.js:1999 queueWatcher @ vue.runtime.esm.js:4418 update @ vue.runtime.esm.js:4560 notify @ vue.runtime.esm.js:730 reactiveSetter @ vue.runtime.esm.js:1055 eval @ vue-router.esm.js:2932 eval @ vue-router.esm.js:2931 updateRoute @ vue-router.esm.js:2352 eval @ vue-router.esm.js:2206 eval @ vue-router.esm.js:2340 step @ vue-router.esm.js:1944 step @ vue-router.esm.js:1951 step @ vue-router.esm.js:1951 runQueue @ vue-router.esm.js:1955 eval @ vue-router.esm.js:2335 step @ vue-router.esm.js:1944 eval @ vue-router.esm.js:1948 eval @ vue-router.esm.js:2322 eval @ vue-router.esm.js:2070 eval @ vue-router.esm.js:2146 eval @ permission.js:110 Promise.then eval @ permission.js:110 eval @ vue-router.esm.js:2087 eval @ vue-router.esm.js:2114 eval @ vue-router.esm.js:2114 flatMapComponents @ vue-router.esm.js:2113 eval @ vue-router.esm.js:2049 iterator @ vue-router.esm.js:2300 step @ vue-router.esm.js:1947 step @ vue-router.esm.js:1951 step @ vue-router.esm.js:1951 eval @ vue-router.esm.js:1948 eval @ vue-router.esm.js:2322 eval @ permission.js:36 iterator @ vue-router.esm.js:2300 step @ vue-router.esm.js:1947 runQueue @ vue-router.esm.js:1955 confirmTransition @ vue-router.esm.js:2330 transitionTo @ vue-router.esm.js:2203 replace @ vue-router.esm.js:2556 eval @ vue-router.esm.js:2316 eval @ permission.js:27 Promise.then eval @ permission.js:24 Promise.then eval @ permission.js:23 iterator @ vue-router.esm.js:2300 step @ vue-router.esm.js:1947 runQueue @ vue-router.esm.js:1955 confirmTransition @ vue-router.esm.js:2330 transitionTo @ vue-router.esm.js:2203 init @ vue-router.esm.js:2923 beforeCreate @ vue-router.esm.js:1271 invokeWithErrorHandling @ vue.runtime.esm.js:1863 callHook @ vue.runtime.esm.js:4235 Vue._init @ vue.runtime.esm.js:5018 Vue @ vue.runtime.esm.js:5099 eval @ main.js:135 ./src/main.js @ app.js:4942 __webpack_require__ @ app.js:854 fn @ app.js:151 1 @ app.js:5230 __webpack_require__ @ app.js:854 checkDeferredModules @ app.js:46 （匿名） @ app.js:994 （匿名） @ app.js:997 vue.runtime.esm.js:619 [Vue warn]: Property or method "lotList" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. found in ---> <Detail> at src/views/mfgLog/area/detail.vue <Index> at src/views/mfgLog/area/index.vue <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root>
08-08
// .eslintrc.js rules: { 'vue/no-unused-properties': 'error' } ``` > 引用[3]中Vue基础示例展示了data/computed的正确声明方式，而引用[4]演示了Vue 3 Composition API中响应式变量的定义规范[^3][^4]。
<template> <view class="webview-container"> <cover-view class="webview-wrapper"> <web-view :src="webviewPath" id="targetWebview" ></web-view> </cover-view> <cover-view class="bottom-action-area"> <cover-view class="capture-btn" @click="generatePdfFromWebview"> <cover-view class="btn-text">生成PDF</cover-view> </cover-view> </cover-view> </view> </template> <script setup lang="ts"> import { onLoad} from '@dcloudio/uni-app'; import { ref } from 'vue'; import jsPDF from 'jspdf'; declare const plus: any; const webviewPath = ref(''); // const ws = ref<any>(null); // const pdfFilePath = ref(''); const showPdfPreview = ref(false); const platform = ref(''); // const htmlContent = ref(''); const pdfViewerUrl = ref(''); onLoad((options: any) => { if (options.url) { webviewPath.value = decodeURIComponent(options.url); pdfViewerUrl.value = `/static/pdfjs/web/viewer.html?file=${encodeURIComponent(webviewPath.value)}`; } // 获取当前平台 const systemInfo = uni.getSystemInfoSync(); platform.value = systemInfo.platform; }); const generatePdfFromWebview = async () => { const pdfUrl = 'https://example.com/document.pdf'; uni.navigateTo({ url: `/pages/pdf-preview?pdfUrl=${encodeURIComponent(pdfUrl)}` }); } </script> <style> .webview-container { position: relative; width: 100%; height: 100vh; overflow: hidden; } .webview-wrapper { height: calc(100vh - 120rpx); width: 100%; overflow: hidden; } .bottom-action-area { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background-color: #007aff; padding: 30rpx; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: center; align-items: center; } .capture-btn { width: 100%; height: 90rpx; background-color: #007aff; border-radius: 45rpx; box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; } .btn-text { color: #ffffff; font-size: 32rpx; font-weight: 500; } /* PDF预览组件样式 */ .custom-preview { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background-color: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column; align-items: center; padding: 0 0 40rpx 0; box-sizing: border-box; } .preview-header { width: 100%; height: 100rpx; background-color: #007aff; color: #ffffff; display: flex; align-items: center; justify-content: center; position: relative; } .title-container { display: flex; align-items: center; justify-content: center; width: 100%; } .preview-title { color: #ffffff; font-size: 34rpx; font-weight: bold; } .close-btn { position: absolute; right: 30rpx; font-size: 40rpx; color: white; } .preview-pdf { width: 100%; height: calc(100% - 100rpx - 120rpx); background-color: white; } .action-buttons { display: flex; width: 100%; justify-content: space-between; padding: 30rpx 5%; margin-top: auto; background-color: #353336; box-sizing: border-box; } .action-btn { flex: 1; height: 90rpx; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; margin: 0 15rpx; color: #ffffff; font-size: 34rpx; font-weight: 500; } .cancel-btn { background-color: #666; } .confirm-btn { background-color: #007aff; } </style> 这是webview页面 应该怎样修改
最新发布
08-09
<cover-view class="bottom-action-area"> 生成PDF预览 import { onLoad, nextTick } from '@dcloudio/uni-app'; import { ref } from 'vue'; const webviewPath = ref(''); onLoad((options: any) =...
mvc @html.action() 跨area调用controller 中的action
weixin_34117211的博客
02-09 386
@{Html.RenderAction("ActionName", "ControllerName", new { area = "Manager" });} 或 @Html.Action("ActionName", "ControllerName", new { area = "Manager" }) 转载于:https://www.cnblogs.com/jin...
MVC下JS库中如何应用@Url.Action地址
飞翔的学习笔记
02-05 4069
在.Net MVC开发时，前端页面要访问时我们一般都会使用@Url.Action("")来获取请求地址，不使用直接输入地址，因为MVC时路由来控制请求访问的，你直接输入地址可能会根据环境的改变而不一致。 如果直接在View上，我们在js脚本中写入如下请求地址程序是能解析对应Control中的Action的 var url = "@Url.Action("Add")"; 但是有时候，我们前段...
asp.net mvc4 html.action,c# – 在Asp.net MVC 4中指定area属性时,ActionLink和Url.Action指定不同的位置...
weixin_29252171的博客
06-26 196
在_LoggedInUser.cshtml(在应用程序的根目录中的Views / Shared文件夹中)视图我想调用AC控制器的Logout方法.我有两个选择：使用ActionLink@Html.ActionLink("Logout", "Logout", "AC", new { area = string.Empty })要么Logout我正在指定区域,因为我想要调用AC控制器的动作方法,而不管...
js url跳转
余安
05-22 5587
最近遇到一个问题，搭建一个网站，需要将解析过来的域名都跳转到www.shoubashou.com对应的域名详情页。 比如说，访问yto.cc，自动跳转到www.shoubashou.com/domain/yto.cc.html &amp;amp;lt;!doctype html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head
js文件中调用action路径问题
Q_zx1bydcom的专栏
08-18 3348
js文件和jsp路径不一致，当js调用action方法时候，不能直接写方法名称；比如：jsp文件在project webRoot jsp目录下，js文件在webRoot-js-tree目录下，则js文件中调用方法时候，需要../返回到jsp文件目录，上例中调用方法test.action url应该写为：../../../test.action
MVC 如何设定默认默认路由为指定的Area下的某个action
chenqiangdage的专栏
08-31 7033
MVC中，一般的情况下，使用IDE工具帮我们生成的代码，在路由注册的时候： public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute(
Area区域Post提交数据的JavaScript示例与实现
在本文档中，我们深入探讨了如何在JavaScript中利用Area区域实现POST提交数据的方法，特别是在使用Ajax技术处理前后端交互时。首先，当用户点击一个名为"btnSava"的按钮时，这个过程触发了事件处理器。这个处理器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值