Flex中 encodeURI 对url进行编码,中文url

本文详细介绍了浏览器中用于编码和解码URI的四个核心方法:encodeURI, decodeURIComponent, decodeURI以及escape。解释了它们各自的用途、语法和返回值,并提供了使用示例来帮助理解。同时强调了在不同场景下选择合适方法的重要性。

encodeURI 方法
将文本字符串编码为一个有效的统一资源标识符 (URI)。

encodeURI(URIString)

必选的 URIString 参数代表一个已编码的 URI。

说明
encodeURI 方法返回一个编码的 URI。如果您将编码结果传递给 decodeURI,那么将返回初始的字符串。encodeURI 方法不会对下列字符进行编码:":"、"/"、";" 和 "?"。请使用 encodeURIComponent 方法对这些字符进行编码。

decodeURIComponent 方法
返回统一资源标识符 (URI) 的一个已编码组件的非编码形式。

decodeURIComponent(encodedURIString)

必选的 encodedURIString 参数代表一个已编码的 URI 组件。

说明
URIComponent 是一个完整的 URI 的一部分。

如果 encodedURIString 无效,将产生一个 URIError。

decodeURI 方法
返回一个已编码的统一资源标识符 (URI) 的非编码形式。

decodeURI(URIstring)

必要的 URIstring 参数代表一个已编码 URI 的值。

说明
使用 decodeURI 方法代替已经过时的 unescape 方法。

decodeURI 方法返回一个字符串值。

如果 URIString 无效,那么将产生一个 URIError。

escape 方法
对 String 对象编码以便它们能在所有计算机上可读,

escape(charString)

必选项 charstring 参数是要编码的任意 String 对象或文字。

说明
escape 方法返回一个包含了 charstring 内容的字符串值( Unicode 格式)。所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替,其中 xx 等于表示该字符的十六进制数。例如,空格返回的是 "%20" 。

字符值大于 255 的以 %uxxxx 格式存储。

注意   escape 方法不能够用来对统一资源标示码 (URI) 进行编码。对其编码应使用 encodeURI 和encodeURIComponent 方法。

unescape 方法
解码用 escape 方法进行了编码的 String 对象。

unescape(charstring)

必选项 charstring 参数是要解码的 String 对象。

说明
unescape 方法返回一个包含 charstring 内容的字符串值。所有以 %xx 十六进制形式编码的字符都用 ASCII 字符集中等价的字符代替。

以 %uxxxx 格式(Unicode 字符)编码的字符用十六进制编码 xxxx 的 Unicode 字符代替.

注意   unescape 方法不能用于解码统一资源标识码 (URI)。解该码可使用 decodeURI 和 decodeURIComponent 方法。

(来源: http://hi.baidu.com/wangchao_cn/blog/item/a525267b6dbfa2fc0bd18715.html)
<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 () => { if (uni.getSystemInfoSync().platform === 'android') { // 安卓使用Intent唤起 plus.runtime.openWeb('https://docs.google.com/viewer?url=' + encodeURI(webviewPath.value)) } else { // iOS可直接用WebView加载 uni.navigateTo({ url: `pages/home/components/Webpreview?url=${encodeURIComponent(webviewPath.value)}` }) } } </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页面 <template> <view> <web-view :src="pdfViewerUrl"></web-view> </view> </template> <script> export default { data() { return { pdfViewerUrl: '' // 将在此处构建PDF查看器的URL }; }, onLoad(options) { // 从跳转链接中获取PDF地址 const pdfUrl = decodeURIComponent(options.src); // 构建PDF.js查看器的URL // 注意:这里使用的是本地static目录下的viewer.html // 假设PDF.js放在static/pdfjs/web/viewer.html this.pdfViewerUrl = `/static/pdfjs/web/viewer.html?file=${encodeURIComponent(pdfUrl)}`; } }; </script> 这是webview预览页面 怎样将在跳到预览页的时候直接跳PDF 将webview内容生成pdf格式预览
08-09
将以下代码进行优化,是的整体更加流畅,有一定专业性: <template> <div class="tabel-search marb-20"> <div class="left" style="display: flex; align-items: center; justify-content: space-between;"> <div class="search-group" style="display: flex; gap: 10px; flex-wrap: wrap;"> <el-select v-model="datas.reportType" placeholder="请选择..." @change="initData" style="min-width: 120px;"> <el-option label="所有类型" :value="-1"></el-option> <el-option label="精选-A" :value="1"></el-option> <el-option label="精选-C" :value="7"></el-option> <el-option label="精选-D" :value="10"></el-option> <el-option label="优选-A" :value="2"></el-option> <el-option label="优选-B" :value="3"></el-option> <el-option label="优选-C" :value="5"></el-option> <el-option label="优选-D" :value="4"></el-option> <el-option label="优选-E" :value="6"></el-option> <el-option label="优选-F" :value="8"></el-option> <el-option label="优选-G" :value="9"></el-option> <el-option label="优选-H" :value="11"></el-option> <el-option label="优选-I" :value="12"></el-option> </el-select> </div> <div style="margin-left:1rem"> <el-select v-model="datas.reportStatus" placeholder="请选择..." @change="initData" style="min-width: 120px;"> <el-option label="所有状态" :value="-1"></el-option> <el-option label="待确认" :value="100"></el-option> <el-option label="待付款" :value="110"></el-option> <el-option label="生成中" :value="120"></el-option> <el-option label="已生效" :value="130"></el-option> <el-option label="已退单" :value="190"></el-option> <el-option label="查询失败" :value="199"></el-option> </el-select> </div> </div> <div class="right" style="display: flex; justify-content: space-between;"> <div style="display: flex; gap: 10px; flex-wrap: wrap;"> <el-input v-model="datas.keyword" placeholder="请输入关健字" @clear="initData" @keyup.enter.native="initData" clearable> <template #append> <el-button :icon="ElIconSearch" @click="initData" /> </template> </el-input> </div> <div style="margin-left:1rem"> <!-- <el-button type="primary" :icon="Download" @click="exportExcel">导出Excel</el-button> --> </div> </div> </div> <div class="order-list"> <el-skeleton :loading="datas.loading" animated> <template #template> </template> <div v-if="datas.listData.length===0" class="nodata"> <span class="text">暂无记录</span> </div> <el-table ref="tableRef" v-loading="datas.loading" :data="datas.listData" stripe class="table-list"> <el-table-column prop="reportNo" label="订单号" min-width="120"></el-table-column> <el-table-column prop="id" label="Id" min-width="120"></el-table-column> <el-table-column label="报告类型" width="120"> <template #default="scope"> <el-tag v-if="scope.row.reportType===1">精选-A</el-tag> <el-tag v-else-if="scope.row.reportType===7">精选-C</el-tag> <el-tag v-else-if="scope.row.reportType===10">精选-D</el-tag> <el-tag v-else-if="scope.row.reportType===2">优选-A</el-tag> <el-tag v-else-if="scope.row.reportType===3">优选-B</el-tag> <el-tag v-else-if="scope.row.reportType===5">优选-C</el-tag> <el-tag v-else-if="scope.row.reportType===4">优选-D</el-tag> <el-tag v-else-if="scope.row.reportType===6">优选-E</el-tag> <el-tag v-else-if="scope.row.reportType===8">优选-F</el-tag> <el-tag v-else-if="scope.row.reportType===9">优选-G</el-tag> <el-tag v-else-if="scope.row.reportType===11">优选-H</el-tag> <el-tag v-else-if="scope.row.reportType===12">优选-I</el-tag> <el-tag v-else type="warning">未知</el-tag> </template> </el-table-column> <el-table-column prop="vin" label="车架号" width="200"></el-table-column> <el-table-column prop="addTime" label="下单时间" width="200"></el-table-column> <el-table-column label="状态" width="120"> <template #default="scope"> <el-tag v-if="scope.row.reportStatus===130" type="success">已生效</el-tag> <el-tag v-else-if="scope.row.reportStatus===100" type="info">待确认</el-tag> <el-tag v-else-if="scope.row.reportStatus===190" type="info">已退单</el-tag> <el-tag v-else-if="scope.row.reportStatus===199" type="info">查询失败</el-tag> <el-tag v-else-if="scope.row.reportStatus===110" type="warning">待付款</el-tag> <el-tag v-else-if="scope.row.reportStatus===120" type="warning">生成中</el-tag> <el-tag v-else type="warning">未知</el-tag> </template> </el-table-column> <el-table-column type="primary" label="查看详情"> <template #default="scope"> <div class="btns"> <el-button type="primary" @click="viewDetail(scope.row.id)"> 查看详情 </el-button> </div> </template> </el-table-column> </el-table> </el-skeleton> </div> <div class="pager-box"> <el-pagination background :page-size="datas.pageSize" :current-page="datas.pageIndex" :total="datas.totalCount" layout="prev,pager,next" @current-change="handleCurrentChange" /> </div> </template> <script setup> //获取当前站点信息 const siteConfig = await useSite('site') //页面SEO设置 useSeoMeta({ title: `订单管理 - ${siteConfig.seoKeyword}`, ogTitle: siteConfig.seoKeyword, description: siteConfig.seoDescription, ogDescription: siteConfig.seoDescription, }) //获取路由信息 const route = useRoute() //定义属性 const datas = reactive({ loading: false, keyword: '', totalCount: 0, pageSize: 10, pageIndex: 1, listData: [], reportType: -1, reportStatus: -1, dateRange: [], }) //初始化数据 const initData = async () => { let sendUrl = `/account/vinReport?pageSize=${datas.pageSize}&pageIndex=${datas.pageIndex}` if (datas.reportType >= 0) { sendUrl += `&reportType=${datas.reportType}` } if (datas.reportStatus >= 0) { sendUrl += `&reportStatus=${datas.reportStatus}` } if (datas.keyword.length > 0) { sendUrl += `&keyword=${encodeURI(datas.keyword)}` } if (datas.dateRange.length > 0) { sendUrl += `&startTime=${datas.dateRange[0]}` sendUrl += `&endTime=${datas.dateRange[1]}` } //获取分页列表 useHttp({ url: sendUrl, beforeSend() { datas.loading = true }, success(res) { datas.listData = res.data datas.totalCount = res.pagination.totalCount datas.pageIndex = res.pagination.pageIndex datas.pageSize = res.pagination.pageSize }, error(err) { datas.listData = [] }, complete() { datas.loading = false } }) } //跳转到第几页 const handleCurrentChange = (val) => { if (datas.pageIndex != val) { datas.pageIndex = val initData() } } // //数据导出功能 ------------ // const exportExcel = async () => { // let sendUrl = `/vehicleReport/reports/ExportExcel?reportType=${datas.reportType}` + // `&reportStatus=${datas.reportStatus}` // if (datas.dateRange.length > 0) { // sendUrl += `&startTime=${datas.dateRange[0]}` // sendUrl += `&endTime=${datas.dateRange[1]}` // } // if (datas.keyword.length > 0) { // sendUrl += `&keyword=${encodeURI(datas.keyword)}` // } // //获取分页列表 // await proxy.$api.request({ // url: sendUrl, // responseType: 'blob', // beforeSend() { // datas.loading = true // }, // success(res) { // let exportData = res.data; // // console.log('导出数据', res); // // 获取当前日期时间 // const now = new Date(); // // 获得年月日时分秒 // const datetimeStr = // now.getFullYear() + // (now.getMonth() + 1).toString().padStart(2, '0') + // now.getDate().toString().padStart(2, '0') + // now.getHours().toString().padStart(2, '0') + // now.getMinutes().toString().padStart(2, '0') + // now.getSeconds().toString().padStart(2, '0'); // // 从响应头获取文件名 // let filename = "车辆报告_" + datetimeStr +".xlsx"; // // 创建下载链接 // const url = window.URL.createObjectURL(new Blob([exportData])); // const link = document.createElement('a'); // link.href = url; // link.setAttribute('download', filename); // document.body.appendChild(link); // link.click(); // // 清理 // document.body.removeChild(link); // window.URL.revokeObjectURL(url); // }, // error(err) { // proxy.$message.error('导出失败,请重试!') // }, // complete() { // datas.loading = false // } // }) // } // //数据导出功能 ------------ //页面完成后执行 onMounted(() => { if (route.params.type) { datas.reportType = parseInt(route.params.type) } initData() }) </script>
最新发布
08-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值