23、document.write 和 innerH

23、document.write 和 innerHTML 的區別？（必會）

ocument.write 是直接寫入到頁面的內容流，如果在寫之前沒有調用 document.open, 瀏覽器會自動調用 open。每次寫完關閉之后重新調用該函數，會導致頁面被重寫。

innerHTML 則是 DOM 頁面元素的一個屬性，代表該元素的 html 內容。你可以精確到某一個具體的元素來進行更改。如果想修改 document 的內容，則需要修改。

document.documentElement.innerElement

innerHTML 將內容寫入某個 DOM 節點，不會導致頁面全部重繪。

innerHTML 很多情況下都優于 document.write，其原因在于其允許更精確的控制要刷新頁面的那一個部分。

么是OpenAPI、什么是開放平臺？

根據百度百科的記錄，

在互聯網時代，把網站的服務封裝成一系列計算機易識別的數據接口開放出去，供第三方開發者使用，這種行為就叫做Open API，提供開放API的平臺本身就被稱為開放平臺。
百度百科

我們也可以通過一些案例來快速認識開放平臺，例如支付寶的開放平臺：

又如抖音開放平臺：

以及微信開放平臺：

總結下來，開放平臺一般有以下特點：

1、二級域名通常使用open，例如：open.xxx.com

2、使用人群和用戶對象主要是開發者，因此需要開發者申請入駐

3、開放平臺核心提供的是OpenAPI，不同開發者或不同應用，擁有不同的接口調用權限

4、開放平臺還需要為開發者用戶提供配套完成的產品功能體系，以便讓開發者可以在平臺上查看和管理賬號、核心業務數據，甚至訂單信息

5、需要提供在線的接口文檔，即便是游客也能訪問查看

6、一個賬號可以創建或申請多個應用

7、平臺側，需要有一個內部管理后臺，對開發者賬號、應用、API接口權限、流量統計等進行通用的管理

如何在1天時間內，快速搭建你的OpenAPI和開放平臺？

下面，以接口大師，也就是PhalApi開源框架的專業版，介紹和分享如何在1在時間內，搭建自己的OpenAPI和開放平臺。

運行環境的要求

接口大師，主要是基于主流的PHP開發語言+MySQL數據庫開發的，所以技術很通用。

運行環境要求如下：

操作系統：Windows/Linux/Mac/Ubuntu/CentOS等
開發語言：PHP 5.3.3 及以上版本，推薦使用PHP 7
數據庫：MySQL 5.5 及以上版本
Web服務器：Nginx/Apache
正式服務器配置最低配置：CPU 1核 / 內存 2G / 硬盤空間40G / 帶寬1M

官方推薦使用：CentOS 7 + PHP 7 + MySQL 5.6 + Nginx

正式的服務器環境，建議使用更高配置的服務器。

安裝

第1步、在獲取到接口大師的源代碼后，將項目源代碼包上傳到服務器，并進行解壓。假設解壓目錄為：/www/phalapi-pro。

源代碼壓縮包解壓后有：

第2步、進行Web服務器的配置。

如果使用的是Nginx，參考以下Nginx配置，配置好重啟Nginx。

server
{
        listen 80;
        server_name open.phalapi.net;


        index index.html index.php;
        root /www/phalapi-pro/public;


        location ~ .*\.(php|php5)?$
        {
                # fastcgi_pass   127.0.0.1:9000;
                fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
                fastcgi_index index.php;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                include fastcgi_params;
        }




        # 管理后臺
        if (!-e $request_filename) {
            rewrite ^/admin/(.*) /admin/index.html;
        }
        # 開放平臺
        if (!-e $request_filename) {
            rewrite ^/platform/(.*) /platform/index.html;
        }
        # 靜態資源緩存
        location ~.*\.(js|css|html|png|jpg)$
        {
                expires    3d;
        }
        # 限制上傳的PHP文件，都只能是下載，而非執行
        location ~* /uploads/.*\.(php|php5)?$
        {
        }


        access_log /var/log/nginx/open.phalapi.net.access.log;
        error_log /var/log/nginx/open.phalapi.net.error.log;
}

溫馨提示：請把open.phalapi.net換成你自己的域名。

第3步、安裝向導

安裝地址：http://你的域名/install ，或者打開首頁：http://你的域名/，點擊進入安裝向導。

進入安裝向導后，同意安裝。檢測通過后，下一步。

根據表單，填寫數據庫的相關配置，以及管理員的賬號和密碼。下一步。

溫馨提示：重點修改你的項目名稱、你的數據庫連接、管理員登錄密碼。

安裝成功。

開始使用你的開放平臺

成功安裝后，就可以開始使用你的自己的開放平臺了。

訪問開放平臺首頁

默認的開放平臺首頁類似如下，你可以根據自己的需求進行二次開發。

首頁，主要是給游客以及已注冊的用戶訪問和使用的，提供了新手引導和開放平臺介紹的內容。

通過頂部菜單，可以看到有以下訪問入口：

首頁
OpenAPI
開放平臺
技術文檔
管理后臺
語言切換
注冊/登錄

訪問開放平臺

開放平臺是提供給你的開發者使用的，開發者可以是內部的也可以是外部的，或者第三方開發者。

當開發者需要使用開放平臺時，第一件事情是需要注冊新賬號。

注冊成功后，即可登錄：

登錄成功后，即可進入開放平臺，進行應用管理、查看接口權限、查看流量統計、提交工單以及開發者個人中心等。例如在開放平臺的首頁可以看到：我的應用、我的訂單、我的套餐、API總數、接口流量統計、我的工單等。

訪問OpenAPI

在開放平臺左下方，以及首頁的頂部菜單，都可以明顯看到有OpenAPI接口文檔的入口。這些是開發者需要重點查看、開發對接、調用和依賴的API接口。

進入到OpenAPI，可以看到有接口分類頁：

接口搜索頁：

接口詳情頁：

在接口詳情頁，同時提供了在線接口測試的功能。

訪問內部管理后臺

管理后臺，是提供給內部管理員使用的，以便對開發者、應用、接口、業務數據等進行全面的管理和維護。

例如，管理后臺的登錄界面：

為方便區分，開發者平臺是藍色主題，管理后臺是黃色主題。

成功登錄后，可以進行管理后臺首頁。

通過左側菜單，可以看到有很豐富和完善的功能和菜單。

首頁
服務大廳
賬號管理（開發者賬號管理，以及管理員賬號）
應用管理（開發者入駐和應用申請審核）
接口管理（接口權限分配）
工單管理
素材庫
配置管理
計劃任務
數據庫管理
統計（登錄、開發者注冊、應用匯總、接口流量等統計）
權限控制（管理后臺和開放平臺的菜單權限分配）

如何添加自己的API接口？

在完成接口大師的安裝，以及簡單的認識和使用后，就可以根據自己的需要，基于接口大師進行二次開發，把自己需要開放的滎接口，需要共享的數據對外提供給你的開發者。

下面以Hello World為示例，講解如何快速二次開發，添加自己的API接口。

創建./src/app/Api/HelloWorld.php文件，并添加以下PHP代碼：

<?php
namespace App\Api;
use App\Common\Api;


/**
 * Hello World示例
 */
class HelloWorld extends Api {


    /**
     * 接口示例
     * @desc 一個開放接口示例，可直接訪問，不需要任何驗證，因為配置了service_whitelist白名單。熟悉后可刪除此示例接口。
     * @return string content 一句話
     */
    public function say() {
        return array('content'=> 'Hello PhalApi Pro!');
    }
}

這樣就可以手動添加一個自己的新接口了，后面的接口文檔、接口權限、接口統計等，都可以由接口大師自動生成。

例如接口分頁會顯示此接口模塊和接口名稱：

Hello World的接口詳情頁：

在開放平臺，開發者可以看到此接口是否有調用權限（由于當前開發者的應用未審核通過，所以不具備任何接口的調用權限）：

在管理后臺，可以看到此接口的權限以及進行分配：

通過界面，自動生成OpenAPI

接口大師，還有一個亮點和創新的功能，就是可以通過界面，直接自動生成OpenAPI的PHP代碼，甚至連代碼都不需要編寫，就可以生成你的接口或CURD數據接口。

只需要填寫接口的類名和方法名，就可以快速生成接口文件的源代碼，保存后，效果就和前面手動編寫接口一樣。非常方便。

小結和在線演示

可以通過演示賬號，直接登錄，在線體驗。

以及接口大師5合1產品矩陣的效果匯總如下：

整體技術架構設計

接口大師，整體技術架構設計如下：

查看技術文檔

更多內容，請參考接口大師的技術文檔。http://www.yesx2.com/wiki/#/

PhalApi Pro 2.0 技術文檔

前言

簡介

安裝

一、使用手冊

1.1 API接口系統使用手冊

1.2 Platform開放平臺使用手冊

1.3 Admin管理后臺使用手冊

二、產品介紹

2.1 整體架構及業務流程

2.2 賬號體系

2.3 開放接口權限

2.4 重要項目配置

三、API接口開發文檔

3.1 接口分類

3.2 在線接口文檔

3.3 如何調用接口

3.4 如何開發接口

3.5 接口調試

3.6 計劃任務

3.7 連接其他數據庫

3.8 第二套接口驗簽方案

四、前端開發文檔

4.1 Platform開放平臺開發文檔

4.2 Admin管理后臺開發文檔

五、附錄

5.1 版本更新日記

5.2 數據庫表結構

5.3 聯系我們

5.4 如何編寫開發手冊

5.5 文檔編寫規范

述

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

在線咨詢

上一篇：JavaEE中統一修改http響應體內容的方法
下一篇：2019 年 JavaScript 調查報告出爐

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商