react项目--前端 js调用本地outlook发送邮件并赋值一个或多个收件人

最新推荐文章于 2023-03-07 17:23:33 发布
最新推荐文章于 2023-03-07 17:23:33 发布
阅读量2.4k 收藏 2
点赞数 1
分类专栏： 【JavaScript 专栏】 前端样式开发- css/ sass/less 文章标签： javascript css reactjs outlook
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43405717/article/details/111352739
版权

调用本地得到outlook的方法

/*
 *	mailto: 表示邮件是收件人；
 *	subject:表示邮件的标题；
 *	body: 表示邮件的内容；
*/
<a href="mailto:xiaopangzi@163.com?subject=邮件标题&body=邮件内容">
	//同时给赋值多个收件人 多个收件人以英文符号 ; 隔开
<a href="mailto:xiaopangzi@163.com;xiaopangzi@163.com?subject=标题&body=内容">

本次我参与的项目中涉及到选中人员后点击button 调用outlook。这时就涉及到是否选中人员的一个校验。

我的逻辑是先写一个button 然后点击的时候如果有选中人员的则调用否则则提示，这个时候如果把调用outLook的方式写成这个形式


<Button><a href={
   }>邮件发送</
最低0.47元/天 解锁文章
Domi 的笔记
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
采用纯js方式实现Outlook Appointments 的导入与导出操作程序
09-25
采用纯js方式实现Outlook Appointments 的导入与导出操作程序。
react-web-audio:一个小的示例React应用程序，可以监听麦克风并可视化音频
05-02
这是一个示例应用程序，显示了如何使用React中的Web Audio API可视化来自麦克风的音频。 如何建立应用程式 如果您对如何在React中构建这样的可视化器感兴趣，请查看博客文章。 有关画布和React的更多信息，请查看...
js调用outlook
上善若水
03-20 4692
[code="javascript"] window.open("mailto:sundysea@hotmail.com?subject=" + value1 + "&body="+ value2); [/code] value1为主题，value2为内容 [code="html"] 以下代码：（转） 网页Javascript提交OutLook发送邮...
JavaScript 之 调用outlook发邮件功能mailto（附带换行问题）
紫陌520的博客
11-11 4443
mailto 众所周知是html中发送电子邮件的代码，写法如下： <a href="mailto:111111@qq.com">发送邮件</a> mailto还有一些参数使用方式，类似地址栏写法： mailto表示收件人（多人中间分号间隔） cc表示抄送人员（多人中间分号间隔） bcc表示密送人员（多人中间分号间隔） subject表示邮件主题 body表示邮...
JavaScript實現打開Microsoft Office Outlook
mfs515156的专栏
10-20 987
Normal 0 0 2 false false false MicrosoftInternetExplorer4 <!-- /* Font Definitio
Web端调用Outlook 的发信窗口
oscar999的专栏
04-01 7929
前端发信有个其他部门的同时问我，想在web 端调用Outlook 窗口进行发信。稍微调研了一下，得出如下结论在前端直接调用Outlook 发信：使用html 标签的方式调用outlook， body不可以使用HTML样式。 最多只能换行aaa如果使用 ActiveXObject 的话， 倒是可以使用HTML 样式， 但是只能在IE中可以使用， Chrome 就要另外装插件了function sen
javascript 打开windows的outlook
AisReclen的专栏
05-02 1099
send mail to me 这样子了，我们就可以在html网页调用打开window的outlook来给我们发送邮件了。 关键的就是这个 mailto: 后面接你的地址就可以了。 写在博客里。呵 还有很多系统的东西吧我想，比如打印机，摄像头，麦克风等。 它们的系统调用名又是什么了，知道的请帖上哦。...
reactive-stack-js-rest-frontend-react:react-stack-js其余前端带有react
05-23
【内容】本项目是一个使用React技术栈构建的前端应用，它着重于实现响应式编程概念，利用RxJS库来处理异步数据流。ReactiveStack是一种以响应式编程为中心的开发模式，它整合了React、RxJS、JavaScript以及其他相关...
create-react-app-babylonjs:BabylonJS +创建React App（JavaScript）入门套件
05-13
将BabylonJS与ReactJS一起使用如果要克隆此存储库，则只需要：$ yarn install # Install project dependencies$ yarn start # Compile and launch (same as `npm start`) 如果您正在启动一个全新的Create React App...
react-markdown-editor：一个带有预览的markdown编辑器，由React.js和TypeScript实现
02-04
一个带有预览的markdown编辑器，由React.js和TypeScript实现。 安装 npm i @uiw/react-markdown-editor 文件 官方文档（ ） 基本用法 import MarkdownEditor from ' @uiw/react-markdown-editor ' ; import React ...
react-copy-mailto:在mailto链接上添加副本弹出框的节点模块
05-26
react-copy-mailto 一个完全可定制的React组件，用于从mailto链接复制电子邮件。 动机 我们都可以同意的一件事是，我们讨厌在单击mailto链接后弹出默认邮件应用程序的情况。 在大多数情况下，我们只想复制电子邮件地址，而这正是该模块起作用的地方。 向大喊大叫，的推文激发了我们的灵感。 演示版 安装及使用 使用此库的最简单方法是通过yarn或npm安装它 yarn add react-copy-mailto 或者 npm install react-copy-mailto 然后在您的应用程序中使用它： import React from "react" ; import CopyMailTo from "react-copy-mailto" ; const YourComponent = ( ) => ( < div> < Co
outlook
07-25
outlook不错的JS效果
javascript实现的outlook事件日视图
03-15
使用javascript+html实现的outlook日视图（间隔为30分钟）的UI。可以拖动，但是算法需要优化处理。
仿制outlook菜单 js
11-06
比较实用，js实现的左侧菜单导航，还适合做些小项目的后台管理的界面。
ReactNative-JS 调用原生方法实例代码
10-21
主要介绍了ReactNative-JS 调用原生方法实例代码的相关资料,需要的朋友可以参考下
“mailto”你会用吗?
热门推荐
yangzhpro的专栏
04-25 4万+
不要小看简单的 “mailto”，需要注意的地方也不少呢。原文来自经典论坛大家知道，mailto是网页设计制作中的一个非常实用的html标签，许多拥有个人网页的朋友都喜欢在网站的醒目位置处写上自己的电子邮件地址，这样网页浏览者一旦用鼠标单击一下由mailto组成的超级连接后，就能自动打开当前计算机系统中默认的电子邮件客户端软件，例如OutLook Express以及Foxmail等。当然有关mai
js自动调用outlook发送邮件
http://blog.csdn.net/lovesummerforever
02-22 1万+
js自动调用outlook发送邮件： 发送邮件测试 发送邮件
用js调用ActiveX发outlook的meeting request的方法
weixin_30740295的博客
02-01 177
最近在一个朋友的帮助下，研究了下用js调用ActiveX发outlook的meeting request的方法，在这里记录下。 <script type="text/javascript">function objappt(Subject, Start, Location, End, RequiredAttendees) {var objOL //As Outlook....
前端查询 多选及全选 vue
qq_43503450的博客
03-07 256
前端查询 多选及全选 vue
react-drag-and-select:React组件以使用鼠标光标选择多个项目代码实现
最新发布
06-09
下面是一个简单的示例，展示了如何使用`react-drag-and-select`组件来实现选择多个项目的功能： ```javascript import React, { useState } from "react"; import DragAndSelect from "react-drag-and-select"; function App() { const [selectedItems, setSelectedItems] = useState([]); const handleSelection = (selectedItems) => { setSelectedItems(selectedItems); }; const items = [ { id: 1, name: "Item 1" }, { id: 2, name: "Item 2" }, { id: 3, name: "Item 3" }, { id: 4, name: "Item 4" }, { id: 5, name: "Item 5" }, ]; return ( <div> <DragAndSelect items={items} onSelection={handleSelection} render={(item, index) => ( <div key={item.id} style={{ marginBottom: 10 }}> <input type="checkbox" checked={selectedItems.includes(item.id)} onChange={() => {}} /> <span style={{ marginLeft: 10 }}>{item.name}</span> </div> )} /> </div> ); } export default App; ``` 在上面的代码中，我们首先导入了`react`和`react-drag-and-select`库。然后，我们使用`useState`钩子来定义了一个名为`selectedItems`的状态，以跟踪用户选择的项目。接着，我们定义了一个名为`handleSelection`的回调函数，用于在选择发生变化时更新`selectedItems`状态。在`handleSelection`回调函数中，我们简单地将所选项目传递给`setSelectedItems`函数，以更新状态。 接下来，我们定义了一个名为`items`的数组，其中包含了我们想要供用户选择的项目。在组件的`render`方法中，我们使用`DragAndSelect`组件来包裹我们的项目。我们将`items`数组传递给`DragAndSelect`组件的`items`属性，以告诉它哪些项目可以被选择。我们还将`handleSelection`函数传递给`DragAndSelect`组件的`onSelection`属性，以在选择发生变化时接收通知。 最后，我们定义了一个`render`函数，用于渲染每个项目。在这个函数中，我们使用一个`<div>`元素来包裹每个项目，并添加了一个复选框和项目名称。我们使用`selectedItems.includes(item.id)`来确定当前项目是否被选择。如果是，我们将复选框标记为选中状态。否则，我们将复选框标记为未选中状态。 希望这个示例能够帮助您了解如何使用`react-drag-and-select`组件来实现选择多个项目的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值