整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天在寫一個關于 html 中 select 下拉元素選擇的動態事件時，發現如果使用 javascript 中的 click 事件的話，會被執行兩次。網上查了一下資料，發現 select 元素下拉選中事件并不適合使用 click 來觸發，而要使用 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>
點擊下拉后，輸出信息如下：
通過上圖可以發現，如果 select 元素的下拉菜單使用 click 事件的話，會輸出兩次結果，也就說在展開下拉菜單之前與選擇下拉菜單之后分別觸發了 click 事件，所以 select 下拉選項的觸發事件，不能使用 click，而使用 change 事件。
示例代碼
<select name="mochu" onchange="GetVal(this)">
<option value="下拉1">選項1</option>
<option value="下拉2">選項2</option>
<option value="下拉3">選項3</option>
<option value="下拉4">選項4</option>
</select>
<script>
function GetVal(obj){
//代表的是選中項的index索引
var index = obj.selectedIndex;
//代表的是選中項的的值
var val = obj.options[index].value;
//代表的是選中項的text
var txt = obj.options[index].text;
console.log(index);
console.log(val);
console.log(txt);
}
</script>
輸出結果：
.NET的SelectPdf Html到Pdf轉換器-社區版是.NET的SelectPdf庫中提供的功能強大的html到pdf轉換器的免費版本。
轉換器提供了許多強大的選項（將任何網頁轉換為pdf，將任何html字符串轉換為pdf，html5 / css3 / javascript支持，頁眉和頁腳支持等），唯一的限制是它最多可以生成pdf文檔。5頁長。
.NET的免費HTML至Pdf轉換器–社區版功能：最多生成5頁pdf文檔，將任何網頁轉換為pdf，將任何原始html字符串轉換為pdf，設置pdf頁面設置（頁面大小，頁面方向，頁面邊距） ，在轉換過程中調整內容大小以適合pdf頁面，設置pdf文檔屬性，設置pdf查看器首選項，設置pdf安全性（密碼，權限），設置轉換延遲和網頁導航超時，自定義頁眉和頁腳，在頁眉中支持html和頁腳，自動和手動分頁符，在每個頁面上重復html表頭，支持@media類型屏幕和打印，支持內部和外部鏈接，基于html元素自動生成書簽，支持HTTP標頭，支持HTTP cookie，支持需要身份驗證的網頁，支持代理服務器，啟用/禁用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 轉成 PDF，並儲存成檔案/// </summary>/// <param name="html">html</param>/// <param name="fileName">絕對路徑</param>public void SaveToFileByHtml(string html, string fileName){var doc = SetPdfDocument(html);doc.Save(fileName);}/// <summary>/// 傳入 Url 轉成 PDF，並儲存成檔案/// </summary>/// <param name="url">url</param>/// <param name="fileName">絕對路徑</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 轉成 PDF，並輸出成 byte[] 格式/// </summary>/// <param name="html">html</param>/// <returns></returns>public byte[] GetFileByteByHtml(string html){var doc = SetPdfDocument(html);return doc.Save();}/// <summary>/// 傳入 Url 轉成 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 轉成 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 轉成 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、調用
/// <summary>/// 下載pdf/// </summary>public void Downpdf(string data){var stream = new BQoolCommon.Helpers.File.WebToPdf().GetFileStreamByHtml(Gethtml(data));Response.Clear();//二進制流數據（如常見的文件下載）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();}
那么如何獲取指定頁面的html 呢 傳入對應的model 獲得指定動態的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 標簽是網頁開發人員構建交互式下拉列表的強大工具。它允許用戶從預定義的選項列表中進行選擇，使表單輸入更加高效且用戶友好。在本文中，我們將全面探索 select 標簽的各種可能性，揭秘一些提高表單功能和用戶體驗的技巧。
select 標簽的基本語法
select 標簽的基本語法如下：
<select>
<option value="value1">選項 1</option>
<option value="value2">選項 2</option>
<option value="value3">選項 3</option>
</select>
在這個例子中，select 標簽定義了下拉列表，而 option 標簽定義了列表中的選項。每個 option 標簽都有一個 value 屬性，表示選項的值，以及顯示給用戶的文本。
自定義選項
select 標簽提供了多種屬性來自定義選項：
來看一個帶有默認選中和禁用選項的例子：
<select>
<option value="apple">蘋果</option>
<option value="banana" selected>香蕉</option>
<option value="orange" disabled>橙子</option>
</select>
在這個例子中，"香蕉" 選項將被默認選中，而 "橙子" 選項將被禁用。
增強 select 標簽
select 標簽可以通過多種方式進行增強，以提高用戶體驗：
來看一個帶有多個選中的例子：
<select multiple>
<option value="apple">蘋果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
在這個例子中，用戶可以選擇多個水果選項。
樣式化 select 標簽
雖然 select 標簽的樣式化受到瀏覽器限制，但你仍然可以使用 CSS 來一定程度地美化它：
來看一個添加自定義樣式的例子：
<style>
select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
select:hover {
border-color: #007bff;
}
</style>
<select>
<option value="option1">選項 1</option>
<option value="option2">選項 2</option>
</select>
在這個例子中，我們使用 CSS 為 select 標簽添加了內邊距、邊框和圓角，并在懸停時改變邊框顏色。
結論：打造動態選擇體驗
HTML select 標簽為網頁開發人員提供了創建動態選擇體驗的強大工具。通過結合選項自定義、增強功能和樣式化技術，你可以創建出高效、直觀且視覺吸引人的下拉列表。不斷探索 select 標簽的無限可能，讓你的網頁表單更加充滿活力和互動性！釋放你的創造力，打造令人難忘的用戶選擇體驗！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
