天在寫一個(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)擊下拉后,輸出信息如下:
通過上圖可以發(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)換過程中調(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.HtmlToPdf
2、方法
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)簽可以通過多種方式進(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)大工具。通過結(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)系。