整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天在寫一個(gè)關(guān)于 html 中 select 下拉元素選擇的動(dòng)態(tài)事件時(shí)，發(fā)現(xiàn)如果使用 javascript 中的 click 事件的話，會(huì)被執(zhí)行兩次。網(wǎng)上查了一下資料，發(fā)現(xiàn) select 元素下拉選中事件并不適合使用 click 來(lái)觸發(fā)，而要使用 change 事件。
html代碼
<select name="mochu" id="mochu">
<option value="1">下拉1</option>
<option value="2">下拉2</option>
<option value="3">下拉3</option>
<option value="4">下拉4</option>
</select>
<script>
$('#mochu').click(function(){
console.log($(this).val());
});
</script>
點(diǎn)擊下拉后，輸出信息如下：
通過(guò)上圖可以發(fā)現(xiàn)，如果 select 元素的下拉菜單使用 click 事件的話，會(huì)輸出兩次結(jié)果，也就說(shuō)在展開下拉菜單之前與選擇下拉菜單之后分別觸發(fā)了 click 事件，所以 select 下拉選項(xiàng)的觸發(fā)事件，不能使用 click，而使用 change 事件。
示例代碼
<select name="mochu" onchange="GetVal(this)">
<option value="下拉1">選項(xiàng)1</option>
<option value="下拉2">選項(xiàng)2</option>
<option value="下拉3">選項(xiàng)3</option>
<option value="下拉4">選項(xiàng)4</option>
</select>
<script>
function GetVal(obj){
//代表的是選中項(xiàng)的index索引
var index = obj.selectedIndex;
//代表的是選中項(xiàng)的的值
var val = obj.options[index].value;
//代表的是選中項(xiàng)的text
var txt = obj.options[index].text;
console.log(index);
console.log(val);
console.log(txt);
}
</script>
輸出結(jié)果：
.NET的SelectPdf Html到Pdf轉(zhuǎn)換器-社區(qū)版是.NET的SelectPdf庫(kù)中提供的功能強(qiáng)大的html到pdf轉(zhuǎn)換器的免費(fèi)版本。
轉(zhuǎn)換器提供了許多強(qiáng)大的選項(xiàng)（將任何網(wǎng)頁(yè)轉(zhuǎn)換為pdf，將任何html字符串轉(zhuǎn)換為pdf，html5 / css3 / javascript支持，頁(yè)眉和頁(yè)腳支持等），唯一的限制是它最多可以生成pdf文檔。5頁(yè)長(zhǎng)。
.NET的免費(fèi)HTML至Pdf轉(zhuǎn)換器–社區(qū)版功能：最多生成5頁(yè)pdf文檔，將任何網(wǎng)頁(yè)轉(zhuǎn)換為pdf，將任何原始html字符串轉(zhuǎn)換為pdf，設(shè)置pdf頁(yè)面設(shè)置（頁(yè)面大小，頁(yè)面方向，頁(yè)面邊距） ，在轉(zhuǎn)換過(guò)程中調(diào)整內(nèi)容大小以適合pdf頁(yè)面，設(shè)置pdf文檔屬性，設(shè)置pdf查看器首選項(xiàng)，設(shè)置pdf安全性（密碼，權(quán)限），設(shè)置轉(zhuǎn)換延遲和網(wǎng)頁(yè)導(dǎo)航超時(shí)，自定義頁(yè)眉和頁(yè)腳，在頁(yè)眉中支持html和頁(yè)腳，自動(dòng)和手動(dòng)分頁(yè)符，在每個(gè)頁(yè)面上重復(fù)html表頭，支持@media類型屏幕和打印，支持內(nèi)部和外部鏈接，基于html元素自動(dòng)生成書簽，支持HTTP標(biāo)頭，支持HTTP cookie，支持需要身份驗(yàn)證的網(wǎng)頁(yè)，支持代理服務(wù)器，啟用/禁用javascript，修改顏色空間，多線程支持，HTML5 / CSS3支持，Web字體支持等等。
1、nuget 引用
Install-Package Select.HtmlToPdf2、方法
using SelectPdf;using System.Collections.Specialized;using System.IO;using System.Web;namespace BQoolCommon.Helpers.File{public class WebToPdf{public WebToPdf(){//SelectPdf.GlobalProperties.LicenseKey = "your-license-key";}/// <summary>/// 將 Html 轉(zhuǎn)成 PDF，並儲(chǔ)存成檔案/// </summary>/// <param name="html">html</param>/// <param name="fileName">絕對(duì)路徑</param>public void SaveToFileByHtml(string html, string fileName){var doc = SetPdfDocument(html);doc.Save(fileName);}/// <summary>/// 傳入 Url 轉(zhuǎn)成 PDF，並儲(chǔ)存成檔案/// </summary>/// <param name="url">url</param>/// <param name="fileName">絕對(duì)路徑</param>/// <param name="httpCookies">Cookies</param>public void SaveToFileByUrl(string url, string fileName, NameValueCollection httpCookies){var doc = SetPdfDocument(url, httpCookies);doc.Save(fileName);}/// <summary>/// 將 Html 轉(zhuǎn)成 PDF，並輸出成 byte[] 格式/// </summary>/// <param name="html">html</param>/// <returns></returns>public byte[] GetFileByteByHtml(string html){var doc = SetPdfDocument(html);return doc.Save();}/// <summary>/// 傳入 Url 轉(zhuǎn)成 PDF，並輸出成 byte[] 格式/// </summary>/// <param name="url">url</param>/// <param name="httpCookies">Cookies</param>/// <returns></returns>public byte[] GetFileByteByUrl(string url, NameValueCollection httpCookies){var doc = SetPdfDocument(url, httpCookies);return doc.Save();}/// <summary>/// 將 Html 轉(zhuǎn)成 PDF，並輸出成 Stream 格式/// </summary>/// <param name="html">html</param>/// <returns></returns>public Stream GetFileStreamByHtml(string html){var doc = SetPdfDocument(html);var pdfStream = new MemoryStream();doc.Save(pdfStream);pdfStream.Position = 0;return pdfStream;}/// <summary>/// 傳入 Url 轉(zhuǎn)成 PDF，並輸出成 Stream 格式/// </summary>/// <param name="html">html</param>/// <returns></returns>public Stream GetFileStreamByUrl(string url, NameValueCollection httpCookies){var doc = SetPdfDocument(url, httpCookies);var pdfStream = new MemoryStream();doc.Save(pdfStream);pdfStream.Position = 0;return pdfStream;}private PdfDocument SetPdfDocument(string html){var converter = new HtmlToPdf();converter.Options.WebPageWidth = 1200;html = HttpUtility.HtmlDecode(html);return converter.ConvertHtmlString(html);}private PdfDocument SetPdfDocument(string url, NameValueCollection httpCookies){var converter = new HtmlToPdf();converter.Options.WebPageWidth = 1200;if (httpCookies != && httpCookies.Count != 0){converter.Options.HttpCookies.Add(httpCookies);}return converter.ConvertUrl(url);}}}
3、調(diào)用
/// <summary>/// 下載pdf/// </summary>public void Downpdf(string data){var stream = new BQoolCommon.Helpers.File.WebToPdf().GetFileStreamByHtml(Gethtml(data));Response.Clear();//二進(jìn)制流數(shù)據(jù)（如常見的文件下載）Response.ContentType = "application/octet-stream";//通知瀏覽器下載文件而不是打開Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode("Profit and Loss Statement.pdf", System.Text.Encoding.UTF8));var bytes = StreamToBytes(stream);Response.BinaryWrite(bytes);Response.Flush();stream.Close();stream.Dispose();Response.End();}
那么如何獲取指定頁(yè)面的html 呢 傳入對(duì)應(yīng)的model 獲得指定動(dòng)態(tài)的html
private string Gethtml(string data){string str = "";str = this.ControllerContext.RenderViewToString("ProfitDetails", data);return str;}
using BQoolCommon.Helpers.Format;using Newtonsoft.Json;using OrdersManager.Models.ViewModel.Report;using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;using System.Web.Mvc;namespace OrdersManager.Web.Infrastructure{public static class HelperExtensions{public static string RenderViewToString(this ControllerContext context, string viewName, string data){if (string.IsOrEmpty(viewName))viewName = context.RouteData.GetRequiredString("action");context.Controller.ViewData.Model = JsonConvert.DeserializeObject<ProfitDetailsmodel>(StringTools.Base64Decode(StringTools.Base64Decode(data)));using (var sw = new StringWriter()){ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(context, viewName);var viewContext = new ViewContext(context,viewResult.View,context.Controller.ViewData,context.Controller.TempData,sw);try{viewResult.View.Render(viewContext, sw);}catch (Exception ex){throw;}return sw.GetStringBuilder().ToString();}}}}
https://www.nuget.org/packages/Select.HtmlToPdf/
TML 的 select 標(biāo)簽是網(wǎng)頁(yè)開發(fā)人員構(gòu)建交互式下拉列表的強(qiáng)大工具。它允許用戶從預(yù)定義的選項(xiàng)列表中進(jìn)行選擇，使表單輸入更加高效且用戶友好。在本文中，我們將全面探索 select 標(biāo)簽的各種可能性，揭秘一些提高表單功能和用戶體驗(yàn)的技巧。
select 標(biāo)簽的基本語(yǔ)法
select 標(biāo)簽的基本語(yǔ)法如下：
<select>
<option value="value1">選項(xiàng) 1</option>
<option value="value2">選項(xiàng) 2</option>
<option value="value3">選項(xiàng) 3</option>
</select>
在這個(gè)例子中，select 標(biāo)簽定義了下拉列表，而 option 標(biāo)簽定義了列表中的選項(xiàng)。每個(gè) option 標(biāo)簽都有一個(gè) value 屬性，表示選項(xiàng)的值，以及顯示給用戶的文本。
自定義選項(xiàng)
select 標(biāo)簽提供了多種屬性來(lái)自定義選項(xiàng)：
來(lái)看一個(gè)帶有默認(rèn)選中和禁用選項(xiàng)的例子：
<select>
<option value="apple">蘋果</option>
<option value="banana" selected>香蕉</option>
<option value="orange" disabled>橙子</option>
</select>
在這個(gè)例子中，"香蕉" 選項(xiàng)將被默認(rèn)選中，而 "橙子" 選項(xiàng)將被禁用。
增強(qiáng) select 標(biāo)簽
select 標(biāo)簽可以通過(guò)多種方式進(jìn)行增強(qiáng)，以提高用戶體驗(yàn)：
來(lái)看一個(gè)帶有多個(gè)選中的例子：
<select multiple>
<option value="apple">蘋果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
在這個(gè)例子中，用戶可以選擇多個(gè)水果選項(xiàng)。
樣式化 select 標(biāo)簽
雖然 select 標(biāo)簽的樣式化受到瀏覽器限制，但你仍然可以使用 CSS 來(lái)一定程度地美化它：
來(lái)看一個(gè)添加自定義樣式的例子：
<style>
select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
select:hover {
border-color: #007bff;
}
</style>
<select>
<option value="option1">選項(xiàng) 1</option>
<option value="option2">選項(xiàng) 2</option>
</select>
在這個(gè)例子中，我們使用 CSS 為 select 標(biāo)簽添加了內(nèi)邊距、邊框和圓角，并在懸停時(shí)改變邊框顏色。
結(jié)論：打造動(dòng)態(tài)選擇體驗(yàn)
HTML select 標(biāo)簽為網(wǎng)頁(yè)開發(fā)人員提供了創(chuàng)建動(dòng)態(tài)選擇體驗(yàn)的強(qiáng)大工具。通過(guò)結(jié)合選項(xiàng)自定義、增強(qiáng)功能和樣式化技術(shù)，你可以創(chuàng)建出高效、直觀且視覺吸引人的下拉列表。不斷探索 select 標(biāo)簽的無(wú)限可能，讓你的網(wǎng)頁(yè)表單更加充滿活力和互動(dòng)性！釋放你的創(chuàng)造力，打造令人難忘的用戶選擇體驗(yàn)！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
