ASP.NET PDF.jsは、クロスドメインアクセスの問題を解決します

       PDF.js pdfファイルにアクセスし、時にはそれが.NETとPDF.js.の使用と方法を導入し、クロスドメインの問題に来ます

       フロントエンドのコード:

<script type="text/javascript">
        var PDFData = "";
        $.ajax({
            type: "get",
            crossDomain: true,
            async: false, // false是不采用异步的方式
            mimeType: 'text/plain;charset=x-user-defined',
            //这里是后台方法,根据实际情况编写自己的参数,主要是返回文件流
            url: "http://localhost:61582/Seal/DownLoad?Name=20171107&ProjectId=1&SignCount=2",  
            success: function (data) {
                PDFData = data; // data是byte[]数组
            }

        });
        var rawLength = PDFData.length;
        // 转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068
        var array = new Uint8Array(new ArrayBuffer(rawLength));
        for (var i = 0; i < rawLength; i++) {
            array[i] = PDFData.charCodeAt(i) & 0xff;
        }
        var pdf_url = array;

		// var url = 'default.pdf';
		var pdfh5 = new Pdfh5('.pdfjs', {
		    pdfurl: pdf_url
		});
		//监听当前加载的pdf页数,currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数,
		pdfh5.on("renderPages",function(currentPageDom){
			console.log(this.currentNum)
			console.log(pdfh5.currentNum)
		})
	</script>

       注URLは、実際の状況を記述するために必要なパラメータは、主に次のことができ、ファイルストリームを返し、フロントエンドのコードいます。

       バックエンドのコード:

 public void DownLoad(string Name, int ProjectId,int SignCount)
 {
    Response.ContentType = "application/x-zip-compressed";
    Response.AddHeader("Content-Disposition", "attachment;filename=" + Name + ".pdf");
    string filename = Server.MapPath(EM.getPdfpath((EM.ProjectFold)ProjectId) + (SignCount==1? "signone\\" : "signtwo\\") + Name + ".pdf");
    Response.TransmitFile(filename);
 }

      アドレスは、そのようにそれに、上記のコードを使用してファイルパスを取得するには、プロジェクトの実際の状況に基づいてファイル名を指定します。

       ノートのWebConfigにsystem.webServerに以下を追加し、設定を追加する必要があります。

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
      </customHeaders>
    </httpProtocol>

 

公開された109元の記事 ウォン称賛42 ビュー570 000 +

おすすめ

転載: blog.csdn.net/sinat_28984567/article/details/87087972