整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5中jQuery实现select禁用和取消禁用功能

单介绍一下jQuery是一个兼容多浏览器的javascript库,轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。下面说一说使用jQyery如何实现select下拉框禁用和取消禁用功能。

其中Html页面代码如下:

<!DOCTYPE HTML>

<html>

<head></head>

<body>

<select id="yoodb">

<option value=“0”>请选择</option>

</select>

</body>

</html>

Js实现添加select禁用操作,代码如下:

$("#yoodb").attr("disabled","disabled");

Js实现添加select取消禁用操作,代码如下:

$("#yoodb").removeAttr("disabled");

HTML以及HTML5中的新属性,其中背景为白色是H5新属性,如图:

html属性

、表单标签Form

1. 什么是表单

表单在网页中负责数据采集功能的。表单是有3部分组成:

(1)表单标签 <form></form>

(2)表单域

(3)表单按钮

2. Form标签、

语法格式:

<form action=”url” method=”get|post”>

</form>

.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.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 轉成 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/